React Mobile Menu
The full-screen navigation for small screens — a slide-in side menu that takes the whole viewport. It carries an accordion mega-menu of grouped, described links (one section open at a time), a primary CTA, a contact block (email / phone / address with mailto: and tel: links), and a row of social links. It's controlled (open / onClose), closes on Escape, and locks body scroll while open. Tap the menu button in the frame below.
AXM Semiconductor
Tap the menu ↗
Enterprise silicon for edge & industrial systems
Open the menu to see the full-screen mobile navigation.
Installation
npx shadcn@latest add mobile-nav.json
Usage
Pair it with a navbar's hamburger button. In production use the default
position="fixed" for a true full-screen takeover; the demo above passes
position="absolute" only so it can live inside a phone frame.
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Whether the drawer is open (controlled) |
| onClose | () => void | — | Called on close (X, backdrop, Escape, link/CTA tap) |
| sections | MobileNavSection[] | — | { title, links: { label, href, description? }[] } |
| brand / logo | string / ReactNode | — | Header brand + mark |
| cta | { label, href } | — | Primary action button |
| contact | { email?, phone?, address? } | — | Contact block with mailto: / tel: links |
| socials | { label, href, icon }[] | — | Social icon links |
| — | — | — | Copyright / legal line |
| — | — | — | = real full-screen; = contained |