Components
Mobile menu
Full-screen slide-in navigation dialog with nested accordion sections, using native HTML APIs.
The mobile menu composes a native <dialog> with nested <details> accordions. Open it with
command="show-modal" and commandfor="<id>", close with command="close" or light-dismiss
via closedby="any". No JavaScript needed.
Internally it uses .dialog[data-size="screen"] for full-viewport coverage and
data-animation="slide-right" for the entrance transition.
Default
Loading components…
<button class="button" data-size="icon" type="button" command="show-modal" commandfor="mobile-menu-1" aria-label="Open menu"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="40" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="40" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg></button><dialog id="mobile-menu-1" class="dialog mobile-menu" data-size="screen" data-animation="slide-right" closedby="any"> <div class="mobile-menu__viewport"> <div class="mobile-menu__header"> <span class="text-md weight-strong">Menu</span> <button class="button" data-variant="ghost" data-size="icon" type="button" commandfor="mobile-menu-1" command="close" aria-label="Close menu" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button> </div> <div class="mobile-menu__body"> <div class="accordion"> <!-- Platform --> <details> <summary class="button" data-variant="ghost"> Platform <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Analytics</span> <span class="text-sm text-muted-foreground" >Real-time insights into product usage.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Automation</span> <span class="text-sm text-muted-foreground">Workflows that run themselves.</span> </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Integrations</span> <span class="text-sm text-muted-foreground" >Connect the tools your team already uses.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Features</span> <span class="text-sm text-muted-foreground" >Everything you need to design, build, and ship.</span > </a> </div> </details> <!-- Resources --> <details> <summary class="button" data-variant="ghost"> Resources <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Documentation</span> <span class="text-sm text-muted-foreground">Guides and API references.</span> </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Blog</span> <span class="text-sm text-muted-foreground">Product news and engineering notes.</span> </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Community</span> <span class="text-sm text-muted-foreground">Join the conversation and get help.</span> </a> </div> </details> <!-- Products — nested accordions for subcategories --> <details> <summary class="button" data-variant="ghost"> Products <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <div class="accordion"> <!-- Design --> <details> <summary class="button" data-variant="ghost"> Design <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Figma Kit</span> <span class="text-sm text-muted-foreground" >Variables, styles, and components.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Color Generator</span> <span class="text-sm text-muted-foreground" >OKLCH scales from a single brand hex.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Type Scale</span> <span class="text-sm text-muted-foreground" >Fluid sizes tuned with Utopia.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Icon Set</span> <span class="text-sm text-muted-foreground" >A consistent, lightweight icon library.</span > </a> </div> </details> <!-- Development --> <details> <summary class="button" data-variant="ghost"> Development <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">CLI</span> <span class="text-sm text-muted-foreground" >Scaffold and ship from the terminal.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">React Components</span> <span class="text-sm text-muted-foreground" >Token-driven primitives for your app.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">REST API</span> <span class="text-sm text-muted-foreground" >Programmatic access to your design data.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Webhooks</span> <span class="text-sm text-muted-foreground" >React to changes in real time.</span > </a> </div> </details> <!-- Content --> <details> <summary class="button" data-variant="ghost"> Content <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">CMS</span> <span class="text-sm text-muted-foreground" >Structured content for any surface.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Localization</span> <span class="text-sm text-muted-foreground" >Ship in every language your users speak.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Media Library</span> <span class="text-sm text-muted-foreground" >Optimized assets, delivered fast.</span > </a> </div> </details> </div> </div> </details> <!-- Megamenu — flattened into nested accordions for mobile --> <details> <summary class="button" data-variant="ghost"> Shop <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm"> <div class="accordion"> <!-- Women --> <details> <summary class="button" data-variant="ghost"> Women <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm pl-sm"> <span class="text-eyebrow text-muted-foreground my-xs">Dresses</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Mini & Midi</span> <span class="text-sm text-muted-foreground" >Everyday lengths for work and weekends.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Maxi Dresses</span> <span class="text-sm text-muted-foreground" >Flowing silhouettes in linen and cotton.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Jumpsuits</span> <span class="text-sm text-muted-foreground" >One-piece outfits, easy to style.</span > </a> <span class="text-eyebrow text-muted-foreground my-xs">Tops</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">T-shirts & Tanks</span> <span class="text-sm text-muted-foreground" >Basics in organic cotton blends.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Blouses & Shirts</span> <span class="text-sm text-muted-foreground" >Office-ready and off-duty styles.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Sweaters & Cardigans</span> <span class="text-sm text-muted-foreground" >Layering pieces for cooler days.</span > </a> <span class="text-eyebrow text-muted-foreground my-xs">Bottoms & Shoes</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Jeans & Denim</span> <span class="text-sm text-muted-foreground" >Straight, wide-leg, and high-rise fits.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Sneakers & Flats</span> <span class="text-sm text-muted-foreground" >Comfort-first everyday footwear.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Boots & Heels</span> <span class="text-sm text-muted-foreground" >Seasonal styles for dress-up moments.</span > </a> </div> </details> <!-- Men --> <details> <summary class="button" data-variant="ghost"> Men <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm pl-sm"> <span class="text-eyebrow text-muted-foreground my-xs">Shirts</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">T-shirts & Polos</span> <span class="text-sm text-muted-foreground" >Classic fits in breathable fabrics.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Oxford & Dress Shirts</span> <span class="text-sm text-muted-foreground" >Collared styles for work and events.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Henleys & Sweaters</span> <span class="text-sm text-muted-foreground" >Casual layers for transitional weather.</span > </a> <span class="text-eyebrow text-muted-foreground my-xs">Pants & Shorts</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Chinos & Trousers</span> <span class="text-sm text-muted-foreground" >Smart casual staples in neutral tones.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Jeans</span> <span class="text-sm text-muted-foreground" >Slim, relaxed, and straight-leg denim.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Joggers & Sweatpants</span> <span class="text-sm text-muted-foreground">Loungewear you can wear out.</span> </a> <span class="text-eyebrow text-muted-foreground my-xs" >Outerwear & Shoes</span > <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Jackets & Coats</span> <span class="text-sm text-muted-foreground" >Bombers, parkas, and wool overcoats.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Sneakers</span> <span class="text-sm text-muted-foreground" >Low-top and high-top everyday pairs.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Boots & Loafers</span> <span class="text-sm text-muted-foreground" >Leather and suede dress-casual options.</span > </a> </div> </details> <!-- Home --> <details> <summary class="button" data-variant="ghost"> Home <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="flex flex-col pb-sm pl-sm"> <span class="text-eyebrow text-muted-foreground my-xs">Bedding</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Sheet Sets</span> <span class="text-sm text-muted-foreground" >Percale, sateen, and linen weaves.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Duvets & Comforters</span> <span class="text-sm text-muted-foreground" >All-season weights and down alternatives.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Pillows & Throws</span> <span class="text-sm text-muted-foreground" >Accent layers for beds and sofas.</span > </a> <span class="text-eyebrow text-muted-foreground my-xs">Kitchen & Dining</span> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Cookware</span> <span class="text-sm text-muted-foreground" >Pots, pans, and non-stick sets.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Tableware</span> <span class="text-sm text-muted-foreground" >Plates, bowls, and flatware collections.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Glassware & Bar</span> <span class="text-sm text-muted-foreground" >Tumblers, wine glasses, and decanters.</span > </a> <span class="text-eyebrow text-muted-foreground my-xs" >Decor & Furniture</span > <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Lighting</span> <span class="text-sm text-muted-foreground" >Floor lamps, pendants, and table lights.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Rugs & Curtains</span> <span class="text-sm text-muted-foreground" >Textiles to anchor and soften a room.</span > </a> <a href="#" class="button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm weight-strong">Seating & Tables</span> <span class="text-sm text-muted-foreground" >Chairs, side tables, and accent pieces.</span > </a> </div> </details> </div> </div> </details> </div> </div> <div class="mobile-menu__footer"> <button class="button flex-1" type="button"> Sign in <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="24" y1="128" x2="136" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <polyline points="96 88 136 128 96 168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <polyline points="136 40 200 40 200 216 136 216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button> <a href="#" class="button flex-1" data-variant="primary">Get started</a> </div> </div></dialog>Structure
<!-- Trigger -->
<button class="button" data-size="icon" command="show-modal" commandfor="mobile-menu-1">☰</button>
<!-- Menu -->
<dialog
id="mobile-menu-1"
class="dialog mobile-menu"
data-size="screen"
data-animation="slide-right"
closedby="any"
>
<div class="mobile-menu__viewport">
<div class="mobile-menu__header">…</div>
<div class="mobile-menu__body">
<div class="accordion">
<details>
<summary class="button" data-variant="ghost">Section</summary>
<div class="flex flex-col pb-sm">
<!-- Links / nested accordions -->
</div>
</details>
</div>
</div>
<div class="mobile-menu__footer">…</div>
</div>
</dialog>Tokens
| Token | Default |
|---|---|
--mobile-menu-background | var(--background) |
--mobile-menu-foreground | var(--foreground) |
--mobile-menu-backdrop | var(--faded-foreground) |
--mobile-menu-header-padding-inline | var(--gap-md) var(--gap-xs) |
--mobile-menu-header-padding-block | var(--gap-xs) |
--mobile-menu-body-padding-inline | var(--gap-sm) |
--mobile-menu-body-padding-block | var(--gap-md) |
--mobile-menu-footer-padding | var(--gap-sm) |
--mobile-menu-footer-gap | var(--gap-xs) |
--mobile-menu-nested-accordion-padding-inline-start | var(--gap-sm) |
API
| Attribute | Where | Values |
|---|---|---|
command | trigger | show-modal, close |
commandfor | trigger | id of the <dialog> |
data-size | .mobile-menu | screen |
data-animation | .mobile-menu | slide-right |
closedby | <dialog> | any, closerequest, none |
Composition notes
- Add
.darkto the dialog for a dark-themed menu regardless of page theme. - The body uses a nested
.accordionwith native<details>for expand/collapse sections. - Nested accordions (accordion inside accordion) automatically indent via
--mobile-menu-nested-accordion-padding-inline-start. - The header and footer are
position: stickyso they remain visible while the body scrolls. - Use
.button[data-variant="ghost"]for nav links inside accordion panels.