Skip to content
Layout

MobileNav

Mobile drawer navigation with MobileNav.Toggle and provider.

React source Astro source Core source

MobileNav

Slide-out mobile navigation drawer built on React Aria Modal — focus trap, Escape, and backdrop dismissal included. Control open state with isOpen / onOpenChange, or share state through MobileNavProvider + MobileNav.Toggle.

Examples

Default

Controlled open state from a button.
Demo.tsxtsx
import { MobileNav } from '@var-ui/react';

<MobileNav isOpen={open} onOpenChange={setOpen} header="Menu">
  <SideNav.Item label="Home" href="/" />
</MobileNav>

Provider and toggle

Wrap the hamburger and drawer in MobileNavProvider so MobileNav.Toggle and MobileNav share open state without prop drilling. AppShell already provides this at the mobile breakpoint.

Provider + toggle
Demo.tsxtsx
import { MobileNav, MobileNavProvider, SideNav } from '@var-ui/react';

<MobileNavProvider defaultIsOpen>
  <MobileNav.Toggle />
  <MobileNav header="Menu">
    <SideNav.Section title="Browse">
      <SideNav.Item label="Home" href="/" isSelected />
      <SideNav.Item label="Docs" href="/docs" />
    </SideNav.Section>
  </MobileNav>
</MobileNavProvider>

Props

Accessibility

The panel is a dialog (label defaults to "Navigation") with a labeled close control. MobileNav.Toggle sets aria-expanded from provider or explicit isOpen, and defaults to aria-label="Open navigation". Prefer the provider pattern when the toggle lives in top chrome and the drawer is a sibling (as in AppShell).