15 Tailwind CSS Navigation Menus

Demo 01 draws the underline with a pseudo-element, not a real border element. Give each link relative and add an after: layer — after:absolute after:left-0 after:bottom-0 after:h-px after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform — then flip it on hover with hover:after:scale-x-100. Scaling a full-width bar from scale-x-0 keeps the animation on the compositor, so it stays smooth, and because the bar is always full width the motion reads as a wipe rather than a grow. The classic bug is animating width from 0 instead: that triggers layout on every frame and janks. Add focus-visible:after:scale-x-100 so keyboard users get the same cue, and set origin-left consistently or the underline will retract from the wrong side on blur.

Demo 02 keeps the trigger and its panel inside one group relative wrapper and drives the panel from the group's state. The panel starts invisible opacity-0 translate-y-1 and becomes group-hover:visible group-hover:opacity-100 group-hover:translate-y-0. Hover alone excludes keyboard users, so add group-focus-within:visible group-focus-within:opacity-100 — focus-within fires when any link inside the panel is tabbed to, which keeps it open while you move through it. Use invisible/visible rather than hidden so the fade can run; hidden is display:none and cancels the transition. Put the trigger in a real <button> with aria-expanded mirrored by a tiny script, and give the panel role="menu" only if you also wire arrow-key movement — otherwise leave it as a plain list so screen readers announce links normally.

Both open a panel under a top-level item, but they solve different scales. Demo 02's dropdown is a single compact panel anchored to its trigger — a two-column tile grid plus a short list — sized to its content and positioned with absolute near the link. Demo 03's mega menu is a full-width band: the panel spans the header, laid out as a six-item icon grid in two columns with a featured promo cell, so it carries a whole product taxonomy at once. Reach for the dropdown when a section has a handful of destinations; reach for the mega menu when you have twenty-plus links that need grouping and visual hierarchy. Do not use the mega menu for three links — the giant empty band reads as broken — and do not cram a product catalog into the small dropdown, where the overflow will scroll awkwardly or spill off-screen on narrow viewports.

Demo 05 keeps the overlay in the DOM at full size and reveals it by animating clip-path rather than toggling display. Closed, the panel is clipped to a zero-height inset at the top; open, the inset expands to cover the viewport, so the menu wipes down like a blind. In Tailwind you drive this with an arbitrary property on a state class — the closed state sets the inset rectangle, the open state sets inset(0) — and add transition-[clip-path] plus a duration. The giant links ride in on a staggered translate-y with increasing transition-delay. The common mistake is hiding the overlay with hidden between states, which kills the wipe; keep it rendered and move focus into it on open instead. Because the panel stays in the layer, trap focus inside it and make Escape close it, or keyboard users land on hidden-but-focusable links behind the clip.

Demo 06 compresses a sticky top-0 header from 72px to 52px by toggling a scrolled class once the page passes a threshold, then transitioning height, logo scale and padding together. The jump you are seeing usually comes from one of two things. First, the class is toggled on every scroll event with no hysteresis, so near the threshold it flaps on and off — add a small dead zone (shrink past, say, 40px, restore below 10px) or throttle with requestAnimationFrame. Second, the content below the header reflows because the header is in flow; keep it sticky so it reserves no extra space, and animate only transform/padding where you can rather than height, which forces layout. Give the bar will-change-transform sparingly and a single transition-all duration-300 so the logo, buttons and shadow all settle on the same curve.

Demo 07 collapses a 240px sidebar to a 68px icon rail by toggling a width class and transitioning width. In rail mode the text labels are not removed — they are hidden with opacity-0 and width clamping while the icons stay, and each row keeps an aria-label or a title tooltip so the destination is still announced and discoverable on hover. The mistake is setting labels to hidden in rail mode: that removes them from the accessibility tree, so a screen-reader user on the collapsed rail hears only unlabeled icons. Keep the links as real anchors, mark the current one with aria-current="page", and expose the collapse toggle as a <button> with aria-expanded. Avoid animating width on a sidebar that contains a long scrolling list on low-power devices — the per-frame reflow of the whole rail can stutter; collapsing a fixed-width rail is cheap, a fluid content column is not.

Demo 08 shows three variants — capsule, underline and an iOS-style segmented control — and the pure-CSS ones avoid measuring the DOM by using equal-width tabs. When every tab is the same fraction of the track, the indicator is just a child whose translate-x is a multiple of 100% of its own width, switched per active state, with transition-transform for the slide. That only holds while the tabs are uniform; the moment labels differ in length you need to read each tab's offset and width in script and write them to CSS variables, because a fixed translate will no longer line up. For accessibility, if you use role="tablist" you must also implement arrow-key movement between tabs and pair each role="tab" with its role="tabpanel" via aria-controls; if these are page links rather than in-page panels, leave them as a plain nav and skip the tab roles entirely.

Demo 13's magnetic navbar leans each link toward the cursor by reading pointer position and writing a translate offset, with the label drifting further than its pill; demo 14's neon bar layers glow with text-shadow, a flickering keyframe and a scanning gradient rule. Both are pointer- and motion-heavy, so skip them where they cost more than they add. Magnetic hover depends on a mouse — on touch there is no cursor to lean toward, so guard it behind a (hover: hover) and (pointer: fine) media query and let it fall back to a static pill, or the links simply will not react to taps. Honour prefers-reduced-motion: reduce and disable the lean, the flicker and the scan for users who ask for less motion. The neon flicker is also a poor fit for a utility dashboard or a content-dense header where it competes with the content; save it for a landing page or a brand-forward site where the spectacle is the point.