- Compatibility
- React >=19.0.0 · Tailwind >=4.0.0 · Client-only
- Browsers
- chrome >= 100, safari >= 16, firefox >= 100
- Mobile strategy
- full
- Reduced motion
- The hamburger morph transition and mobile panel entrance animation are disabled entirely under `prefers-reduced-motion: reduce` (panel appears instantly, bars snap to their open/closed state with no transition). The desktop bar has no motion beyond an opacity/color hover on links and CTA, which is left in place as it is a state change, not decorative movement.
- Performance
- ~2.5KB gzip, zero runtime dependencies beyond React — The mobile panel and its `inert`/focus-trap listeners only mount and attach while `open` is true; closed, the component is a static header with no document-level listeners. The nav bar itself does no per-frame work — the glass border/blur is pure CSS. The only imperative work is on menu open/close: querying focusable elements in the panel and toggling `inert` on body children, both O(n) in DOM children, not run on scroll or resize.
- Accessibility
- Nav is a labeled `<header><nav aria-label="Primary">`. The mobile trigger button exposes `aria-expanded` and `aria-controls` pointing at the panel id. The open panel is a proper `role="dialog" aria-modal="true"` with an accessible name, receives initial focus on open, traps Tab/Shift+Tab within itself, closes and restores focus to the trigger on Escape or link activation, and applies `inert` to all other body children while open so background content is unreachable by keyboard or assistive tech.
- Known limitations
- The inert-based trap assumes the nav is a direct or ancestor-adjacent child of `<body>`; deeply portaled usage may need the inert targets adjusted.
- Backdrop-filter blur has no fallback for browsers that don't support it — the bar degrades to a semi-transparent flat panel, which is still legible but loses the glass effect.
- Only one instance of the mobile panel should be open at a time per page; the component does not coordinate with sibling instances.
- License
- MIT