Visible on desktop in docs
Production
MobileNav is hidden from md up (md:hidden). Previews pass alwaysVisible so you can open and click the panel on any screen size.Default — IconButton trigger
Controlled open state
open=false
Button trigger (text)
Nav items with icons
Many links
Panel with footer action
In Navbar start slot (typical app use)
In production, drop alwaysVisible — the trigger only shows below md; desktop uses inline navbar links.
Production breakpoint (hidden on wide viewports)
No alwaysVisible — resize the window narrow or use devtools device mode to see the trigger.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| trigger | Optional | ReactElement | — | Menu button — receives aria-expanded / aria-controls. |
| open / onOpenChange | Optional | boolean | — | Controlled open state (panel starts closed). |
| defaultOpen | Optional | boolean | false | Uncontrolled initial open — avoid on mobile; menu should start closed. |
| alwaysVisible | Optional | boolean | false | Skip md:hidden — for docs or always-collapsed layouts. |
| menuLabel / closeLabel | Optional | string | — | aria-label on trigger when open/closed. |
| children | Optional | ReactNode | — | NavItem links, Divider, Button footer, etc. |