16 Tailwind CSS Mobile Navbars & Menus

Demo 01 keeps the whole toggle in CSS. A visually-hidden <input> checkbox sits before the drawer, and the hamburger is a <label> whose for points at it. When the box is checked, a sibling-combinator rule (or :has() on the wrapper) flips the drawer from translate-x-full to translate-x-0 and fades the backdrop in. The three bars morph into an X with rotate-45 and -translate-y on the top and bottom spans while the middle span gets opacity-0. Because the state lives on a real form control, it works with zero script and the label is keyboard-focusable by default, so Space toggles it. The only extra piece is a second <label> over the backdrop pointing at the same checkbox, so tapping outside unchecks it and closes the drawer.

This is the most common drawer bug: the panel opens but the content behind it keeps scrolling, and on iOS the body rubber-bands and the address bar jumps. A pure-CSS toggle cannot set overflow: hidden on the document, so a drawer like demo 01 needs a few lines of script to add a lock class to <body> on open. Do it properly: read the current scrollY, apply position: fixed plus a negative top to the body, then on close remove it and restore scrollTo — otherwise the page snaps to the top when the drawer closes. The swipe sidebar in demo 06 sidesteps this by calling preventDefault inside the tracked move handler, so the gesture pans the drawer instead of the page underneath it.

Every toggle control needs aria-expanded reflecting the open state, and every panel needs a name via aria-label or aria-labelledby. When a menu covers the screen, like the overlays in demos 02 and 11, move focus into the panel on open, return it to the trigger on close, and set aria-hidden on the backgrounded content so a screen reader doesn't read through it. Escape must close: the command palette in demo 15 binds a <keydown> listener for Escape and the arrow keys, and the carousel in demo 12 listens for Left and Right. The pure-CSS drawers get keyboard toggling for free because the label wraps a real checkbox, but CSS alone cannot trap focus, so a tall drawer still needs a small script if you want Tab to stay inside it rather than reaching links behind the backdrop.

Demos 06 and 12 track three touch events. On <touchstart> you store the starting X and the panel's current offset; on <touchmove> you compute the delta and write it straight to transform: translateX() so the panel follows the finger exactly — and you must disable the CSS transition during the drag, or every frame lags behind. On <touchend> you re-enable the transition and decide the snap: if the drag passed roughly a third of the width, or the velocity is high, snap open, otherwise snap back closed. Demo 06 only begins tracking when the touch starts near the screen edge, so a swipe in the page body doesn't yank the sidebar. Call preventDefault in the move handler to stop the page scrolling while you pan, but only once the horizontal delta clearly beats the vertical one, so normal vertical scrolling still works.

The frosted look in demos 03, 10 and 15 is backdrop-blur-xl combined with a translucent background such as bg-white/70. The blur samples whatever sits behind the bar, so it only becomes visible when content scrolls underneath it. Two gotchas bite here. First, the element needs a semi-transparent background for the blur to show at all — a solid bg-white paints over it and you see nothing. Second, backdrop-filter is clipped by overflow: hidden on any ancestor, so a parent with clipped overflow silently kills the effect. Add a hairline border-white/20 to define the top edge. For the iOS tab bar in demo 03, the bar is fixed to the bottom with pb-[env(safe-area-inset-bottom)] so its row of targets clears the home indicator on notched phones.

Reach for the full-screen overlay in demo 02 or the radial FAB in demo 05 only when navigation is the task — a marketing or portfolio site where picking a destination is the whole point of the screen. On a content-heavy app they are the wrong choice: they hide everything, demand a second tap to get anywhere, and the circular clip-path reveal is decoration that delays the user. For frequent switching between a few destinations, the bottom tab bar in demos 03 and 16 wins outright — the targets stay visible and sit one thumb-tap away. The speed-dial in demo 07 suits a single primary action with a few related ones, like compose or share; past about five items the arc gets cramped and labels start to collide. Match the pattern to how often the user navigates, not to which animation looks best in isolation.

Demo 15 opens on a click, on ⌘K on Mac or Ctrl K elsewhere. The handler listens on <keydown>, checks e.metaKey || e.ctrlKey together with e.key === 'k', and calls preventDefault so the browser's own shortcut never fires. Live filtering compares the input value against each item's text and hides the non-matches; the highlighted row is tracked as an index so Up and Down move it and Enter activates it. The classic bug is forgetting to reset that active index when the filtered list shrinks — if the user types until only two results remain, a stored index of four now points at nothing and Enter does nothing. Clamp it to the visible count on every keystroke. Keep the input focused on open, and restore focus to the trigger element on close so keyboard users aren't dropped at the top of the page.

Demos 02 and 11 animate a clip-path rather than width or opacity, which keeps the reveal cheap for the compositor and smooth on mobile. The overlay is always full-screen in the DOM; closed, it is clipped to a tiny circle() positioned at the button, and open it animates out to a radius large enough to cover the viewport. Demo 11 instead uses a polygon() that wipes in from one corner. Two things to watch. Animate between two clip-paths that use the same shape function with the same number of points, or the browser can't interpolate and the shape simply snaps with no animation. And size the open circle in viewport units like 150vmax so it always clears the screen regardless of aspect ratio. Stagger the link fade-in with transition delays so the menu items arrive just after the shape finishes, not during the wipe.