MobileNav

Usage

MobileNav is a controlled component — pair open with local state and wire onClose so Escape, the backdrop, the ✕ button and every link dismiss it. The trigger (hamburger) lives in the consumer, next to TopNav / Header.

import { MobileNav } from '@epasslive/design-system'
import { useState } from 'react'

export function SiteChrome() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button
        type="button"
        aria-expanded={open}
        aria-haspopup="dialog"
        aria-controls="site-mobile-nav"
        onClick={() => setOpen(true)}
      >
        Menu
      </button>
      <MobileNav
        id="site-mobile-nav"
        open={open}
        onClose={() => setOpen(false)}
        links={[
          { label: 'Discover', href: '/discover', active: true },
          { label: 'Venues', href: '/venues' },
          { label: 'Help', href: '/help' },
        ]}
      />
    </>
  )
}

Responsive usage

• MobileNav is the standalone mobile drawer opened by the TopNav / Header hamburger trigger on small viewports — the trigger lives in the consumer (the component is controlled), MobileNav owns the drawer.
• Pass the hamburger button's ref as triggerRef so focus returns to it on close.
• Use the id prop plus aria-controls /aria-expanded on the trigger to wire it accessibly.
• For sidebar-style app navigation (dashboard/docs), use Sidebar instead — it ships its own integrated mobile drawer below a configurable breakpoint.

Accessibility

• Renders role="dialog" with aria-modal="true", portalled to document.body; named via ariaLabel (default "Mobile navigation").
• Escape closes; backdrop clicks (clicks outside the panel) close; every nav link closes on click. Initial focus lands on the ✕ close button; a focus trap cycles Tab/Shift+Tab while open; focus returns to the triggerRef element on close; body scroll is locked while open.
• The active link exposes aria-current="page"; the open/close slide transition is disabled under motion-reduce.

Props