Components
Mobile menu
Fullscreen slide-in navigation dialog with nested accordion sections.
The mobile menu combines a native <dialog> with nested <details> accordions. Trigger with command="show-modal" and commandfor="<id>". Close with command="close" or backdrop light-dismiss via closedby="any".
Default
Loading components…
<button class="ui-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="ui-dialog ui-mobile-menu border-none" data-size="screen" data-animation="slide-right" closedby="any"> <div data-slot="mobile-menu-viewport"> <div data-slot="mobile-menu-header"> <span class="text-md font-strong">Menu</span> <button class="ui-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 data-slot="mobile-menu-body"> <ui-accordion> <!-- Platform --> <details> <summary class="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Analytics</span> <span class="text-sm text-muted-foreground" >Real-time insights into product usage.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Automation</span> <span class="text-sm text-muted-foreground">Workflows that run themselves.</span> </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Integrations</span> <span class="text-sm text-muted-foreground" >Connect the tools your team already uses.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Documentation</span> <span class="text-sm text-muted-foreground">Guides and API references.</span> </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Blog</span> <span class="text-sm text-muted-foreground">Product news and engineering notes.</span> </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button w-full justify-between" 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"> <ui-accordion> <!-- Design --> <details> <summary class="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Figma Kit</span> <span class="text-sm text-muted-foreground" >Variables, styles, and components.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Color Generator</span> <span class="text-sm text-muted-foreground" >OKLCH scales from a single brand hex.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Type Scale</span> <span class="text-sm text-muted-foreground" >Fluid sizes tuned with Utopia.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Icon Set</span> <span class="text-sm text-muted-foreground" >A consistent, lightweight icon library.</span > </a> </div> </details> <!-- Development --> <details> <summary class="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">CLI</span> <span class="text-sm text-muted-foreground" >Scaffold and ship from the terminal.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">React Components</span> <span class="text-sm text-muted-foreground" >Token-driven primitives for your app.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">REST API</span> <span class="text-sm text-muted-foreground" >Programmatic access to your design data.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Webhooks</span> <span class="text-sm text-muted-foreground" >React to changes in real time.</span > </a> </div> </details> <!-- Content --> <details> <summary class="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">CMS</span> <span class="text-sm text-muted-foreground" >Structured content for any surface.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Localization</span> <span class="text-sm text-muted-foreground" >Ship in every language your users speak.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Media Library</span> <span class="text-sm text-muted-foreground" >Optimized assets, delivered fast.</span > </a> </div> </details> </ui-accordion> </div> </details> <!-- Megamenu — flattened into nested accordions for mobile --> <details> <summary class="ui-button w-full justify-between" 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"> <ui-accordion> <!-- Women --> <details> <summary class="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Mini & Midi</span> <span class="text-sm text-muted-foreground" >Everyday lengths for work and weekends.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Maxi Dresses</span> <span class="text-sm text-muted-foreground" >Flowing silhouettes in linen and cotton.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">T-shirts & Tanks</span> <span class="text-sm text-muted-foreground" >Basics in organic cotton blends.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Blouses & Shirts</span> <span class="text-sm text-muted-foreground" >Office-ready and off-duty styles.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Jeans & Denim</span> <span class="text-sm text-muted-foreground" >Straight, wide-leg, and high-rise fits.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Sneakers & Flats</span> <span class="text-sm text-muted-foreground" >Comfort-first everyday footwear.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">T-shirts & Polos</span> <span class="text-sm text-muted-foreground" >Classic fits in breathable fabrics.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Oxford & Dress Shirts</span> <span class="text-sm text-muted-foreground" >Collared styles for work and events.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Chinos & Trousers</span> <span class="text-sm text-muted-foreground" >Smart casual staples in neutral tones.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Jeans</span> <span class="text-sm text-muted-foreground" >Slim, relaxed, and straight-leg denim.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Jackets & Coats</span> <span class="text-sm text-muted-foreground" >Bombers, parkas, and wool overcoats.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Sneakers</span> <span class="text-sm text-muted-foreground" >Low-top and high-top everyday pairs.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button w-full justify-between" 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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Sheet Sets</span> <span class="text-sm text-muted-foreground" >Percale, sateen, and linen weaves.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Duvets & Comforters</span> <span class="text-sm text-muted-foreground" >All-season weights and down alternatives.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Cookware</span> <span class="text-sm text-muted-foreground" >Pots, pans, and non-stick sets.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Tableware</span> <span class="text-sm text-muted-foreground" >Plates, bowls, and flatware collections.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-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="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Lighting</span> <span class="text-sm text-muted-foreground" >Floor lamps, pendants, and table lights.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Rugs & Curtains</span> <span class="text-sm text-muted-foreground" >Textiles to anchor and soften a room.</span > </a> <a href="#" class="ui-button flex flex-col items-start p-xs" data-variant="ghost"> <span class="text-sm font-strong">Seating & Tables</span> <span class="text-sm text-muted-foreground" >Chairs, side tables, and accent pieces.</span > </a> </div> </details> </ui-accordion> </div> </details> </ui-accordion> </div> <div data-slot="mobile-menu-footer"> <button class="ui-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="ui-button flex-1" data-variant="primary">Get started</a> </div> </div></dialog>/** * mobile-menu.css — Mobile menu (.ui-mobile-menu) * * @layer variables, components * @requires layers.css, _variables.css, dialog.css, accordion.css * @uses Composes .ui-dialog[data-size="screen"] — fullscreen native <dialog> * @uses Invoker Commands (command="show-modal") — open without JS (markup) * @uses view-transition-name — stable menu across navigations * @uses @starting-style — viewport enter animation * @uses Overrides --ui-dialog-* motion tokens for slide-right variant * @tokens --ui-mobile-menu-* (@layer variables) */@layer variables { :root { --ui-mobile-menu-background: var(--background); --ui-mobile-menu-foreground: var(--foreground); --ui-mobile-menu-backdrop: var(--faded-foreground); --ui-mobile-menu-header-padding-inline: var(--gap-md) var(--gap-xs); --ui-mobile-menu-header-padding-block: var(--gap-xs); --ui-mobile-menu-body-padding-inline: var(--gap-sm); --ui-mobile-menu-body-padding-block: var(--gap-md); --ui-mobile-menu-footer-padding: var(--gap-sm); --ui-mobile-menu-footer-gap: var(--gap-xs); --ui-mobile-menu-nested-accordion-padding-inline-start: var(--gap-sm); --ui-mobile-menu-viewport-opacity--start: 0; --ui-mobile-menu-viewport-opacity--end: 1; --ui-mobile-menu-viewport-scale--start: 0.98; --ui-mobile-menu-viewport-scale--end: 1; --ui-mobile-menu-viewport-translate--start: -2rem, 1rem, 0; --ui-mobile-menu-viewport-translate--end: 0, 0, 0; }}@layer zazz.components { /* =========================================================================== MOBILE MENU — full-screen dialog with accordion-based nested navigation - Composes .ui-dialog[data-size="screen"] + :where(ui-accordion, .ui-accordion) for expand/collapse - No JavaScript — Invoker Commands to open, native dialog close, native details =========================================================================== */ .ui-mobile-menu { /* View transitions - keeps the menu stable when navigating between pages */ view-transition-name: global-mobile-menu; inline-size: 100%; --ui-dialog-background: var(--ui-mobile-menu-background); --ui-dialog-foreground: var(--ui-mobile-menu-foreground); overflow: clip; } .ui-mobile-menu::backdrop { background-color: var(--ui-mobile-menu-backdrop); } [data-slot~="mobile-menu-viewport"] { display: grid; position: relative; grid-template-rows: auto 1fr auto; overflow: clip; align-items: start; inline-size: 100%; block-size: 100%; max-block-size: 100svh; transition: var(--default-transition); transition-duration: var(--ui-dialog-transition-duration); transition-delay: calc(var(--ui-dialog-transition-duration) / 1.5); } .ui-mobile-menu[data-animation="slide-right"][open] [data-slot~="mobile-menu-viewport"] { opacity: var(--ui-mobile-menu-viewport-opacity--end); transform: scale(var(--ui-mobile-menu-viewport-scale--end)) translate3d(var(--ui-mobile-menu-viewport-translate--end)); @starting-style { opacity: var(--ui-mobile-menu-viewport-opacity--start); transform: scale(var(--ui-mobile-menu-viewport-scale--start)) translate3d(var(--ui-mobile-menu-viewport-translate--start)); } } [data-slot~="mobile-menu-header"] { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--ui-mobile-menu-header-padding-inline); padding-block: var(--ui-mobile-menu-header-padding-block); border-bottom: 1px solid var(--border); position: sticky; top: 0; background-color: var(--ui-mobile-menu-background); z-index: 1; } [data-slot~="mobile-menu-body"] { display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; padding-inline: var(--ui-mobile-menu-body-padding-inline); padding-block: var(--ui-mobile-menu-body-padding-block); max-block-size: 100%; scrollbar-gutter: stable both-edges; } [data-slot~="mobile-menu-footer"] { display: flex; flex-wrap: wrap; gap: var(--ui-mobile-menu-footer-gap); padding: var(--ui-mobile-menu-footer-padding); border-top: 1px solid var(--border); position: sticky; bottom: 0; background-color: var(--ui-mobile-menu-background); } /* Nested accordion inside mobile menu — tighter padding for sub-levels */ [data-slot~="mobile-menu-body"] :where(ui-accordion, .ui-accordion) :where(ui-accordion, .ui-accordion) { padding-inline-start: var(--ui-mobile-menu-nested-accordion-padding-inline-start); } [data-slot~="mobile-menu-body"] :where(ui-accordion, .ui-accordion) details:not(:last-child) { border-bottom-color: var(--border); } /* =========================================================================== MOBILE MENU SLIDE DOWN ANIMATION =========================================================================== */ /* Slide-right: accordion-style block-size reveal on the viewport (not scaleY). */ .ui-mobile-menu[data-animation="slide-right"] { --ui-dialog-transition-duration: calc(var(--default-transition-duration) * 1.75); --ui-dialog-opacity--start: 1; --ui-dialog-scale--start: 1; --ui-dialog-translate--start: -100%, 0, 0; --ui-dialog-translate--end: 0, 0, 0; overflow: clip; transform-origin: left center; }}Markup template
<!-- Trigger -->
<button class="ui-button" data-size="icon" command="show-modal" commandfor="mobile-menu-1">
☰
</button>
<!-- Menu -->
<dialog
id="mobile-menu-1"
class="ui-dialog ui-mobile-menu"
data-size="screen"
data-animation="slide-right"
closedby="any"
>
<div data-slot="mobile-menu-viewport">
<div data-slot="mobile-menu-header">...</div>
<div data-slot="mobile-menu-body">
<div class="ui-accordion">
<details>
<summary class="ui-button" data-variant="ghost">Section</summary>
<div class="flex flex-col pb-sm">
<!-- Nav links -->
</div>
</details>
</div>
</div>
<div data-slot="mobile-menu-footer">...</div>
</div>
</dialog>Tokens
| Token | Default |
|---|---|
--ui-mobile-menu-background | var(--background) |
--ui-mobile-menu-foreground | var(--foreground) |
--ui-mobile-menu-backdrop | var(--faded-foreground) |
--ui-mobile-menu-header-padding-inline | var(--gap-md) var(--gap-xs) |
--ui-mobile-menu-header-padding-block | var(--gap-xs) |
--ui-mobile-menu-body-padding-inline | var(--gap-sm) |
--ui-mobile-menu-body-padding-block | var(--gap-md) |
--ui-mobile-menu-footer-padding | var(--gap-sm) |
--ui-mobile-menu-footer-gap | var(--gap-xs) |
--ui-mobile-menu-nested-accordion-padding-inline-start | var(--gap-sm) |
API
| Attribute | Target | Values |
|---|---|---|
command | Trigger | show-modal, close |
commandfor | Trigger | Target dialog ID |
data-size | .ui-mobile-menu | screen |
data-animation | .ui-mobile-menu | slide-right |
closedby | <dialog> | any, closerequest, none |