API
Mobile menu
A fullscreen navigation dialog for small screens.
Installation
pnpm dlx zazz-ui add mobile-menunpx zazz-ui add mobile-menuyarn dlx zazz-ui add mobile-menubunx zazz-ui add mobile-menuAlso adds accordion, dialog, which it depends on. Run zazz-ui init first if the project has no zazz/ folder yet.
Examples
<button
data-ui="button"
data-button-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"
data-ui="dialog mobile-menu"
data-dialog-size="screen"
data-mobile-menu-animation="slide-right"
closedby="any"
style="--border-width: 0"
>
<div data-mobile-menu-slot="viewport">
<div data-mobile-menu-slot="header">
<span
style="
--font-size: var(--font-size-md);
--font-weight: strong;
--leading: var(--leading-md);
--tracking: var(--tracking-md);
"
>Menu</span
>
<button
data-ui="button"
data-button-variant="ghost"
data-button-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-mobile-menu-slot="body">
<ui-accordion>
<!-- Platform -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Platform
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Analytics</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Real-time insights into product usage.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Automation</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Workflows that run themselves.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Integrations</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Connect the tools your team already uses.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Features</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Everything you need to design, build, and ship.</span
>
</a>
</div>
</details>
<!-- Resources -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Resources
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Documentation</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Guides and API references.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Blog</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Product news and engineering notes.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Community</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Join the conversation and get help.</span
>
</a>
</div>
</details>
<!-- Products — nested accordions for subcategories -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Products
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<ui-accordion>
<!-- Design -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Design
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Figma Kit</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Variables, styles, and components.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Color Generator</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>OKLCH scales from a single brand hex.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Type Scale</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Fluid sizes tuned with Utopia.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Icon Set</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>A consistent, lightweight icon library.</span
>
</a>
</div>
</details>
<!-- Development -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Development
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>CLI</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Scaffold and ship from the terminal.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>React Components</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Token-driven primitives for your app.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>REST API</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Programmatic access to your design data.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Webhooks</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>React to changes in real time.</span
>
</a>
</div>
</details>
<!-- Content -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Content
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>CMS</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Structured content for any surface.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Localization</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Ship in every language your users speak.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Media Library</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Optimized assets, delivered fast.</span
>
</a>
</div>
</details>
</ui-accordion>
</div>
</details>
<!-- Megamenu — flattened into nested accordions for mobile -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Shop
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
"
>
<ui-accordion>
<!-- Women -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Women
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
--pl: 4;
"
>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Dresses</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Mini & Midi</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Everyday lengths for work and weekends.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Maxi Dresses</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Flowing silhouettes in linen and cotton.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Jumpsuits</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>One-piece outfits, easy to style.</span
>
</a>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Tops</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>T-shirts & Tanks</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Basics in organic cotton blends.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Blouses & Shirts</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Office-ready and off-duty styles.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Sweaters & Cardigans</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Layering pieces for cooler days.</span
>
</a>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Bottoms & Shoes</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Jeans & Denim</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Straight, wide-leg, and high-rise fits.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Sneakers & Flats</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Comfort-first everyday footwear.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Boots & Heels</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Seasonal styles for dress-up moments.</span
>
</a>
</div>
</details>
<!-- Men -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Men
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
--pl: 4;
"
>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Shirts</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>T-shirts & Polos</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Classic fits in breathable fabrics.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Oxford & Dress Shirts</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Collared styles for work and events.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Henleys & Sweaters</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Casual layers for transitional weather.</span
>
</a>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Pants & Shorts</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Chinos & Trousers</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Smart casual staples in neutral tones.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Jeans</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Slim, relaxed, and straight-leg denim.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Joggers & Sweatpants</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Loungewear you can wear out.</span
>
</a>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Outerwear & Shoes</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Jackets & Coats</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Bombers, parkas, and wool overcoats.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Sneakers</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Low-top and high-top everyday pairs.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Boots & Loafers</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Leather and suede dress-casual options.</span
>
</a>
</div>
</details>
<!-- Home -->
<details>
<summary
data-ui="button"
data-button-variant="ghost"
style="
--justify: space-between;
--w: 100%;
"
>
Home
<svg
data-accordion-slot="marker"
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
style="
--display: flex-col;
--pb: 4;
--pl: 4;
"
>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Bedding</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Sheet Sets</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Percale, sateen, and linen weaves.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Duvets & Comforters</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>All-season weights and down alternatives.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Pillows & Throws</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Accent layers for beds and sofas.</span
>
</a>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Kitchen & Dining</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Cookware</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Pots, pans, and non-stick sets.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Tableware</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Plates, bowls, and flatware collections.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Glassware & Bar</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Tumblers, wine glasses, and decanters.</span
>
</a>
<span
style="
--display: inline-flex;
--my: 2;
--font-size: var(--font-size-eyebrow);
--font-weight: var(--font-weight-eyebrow);
--leading: var(--leading-eyebrow);
--tracking: var(--tracking-eyebrow);
--text-transform: uppercase;
--text: var(--color-muted-foreground);
"
>Decor & Furniture</span
>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Lighting</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Floor lamps, pendants, and table lights.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Rugs & Curtains</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Textiles to anchor and soften a room.</span
>
</a>
<a
href="#"
data-ui="button"
data-button-variant="ghost"
style="
--display: flex-col;
--items: start;
--p: 2;
"
>
<span
style="
--font-size: var(--font-size-sm);
--font-weight: strong;
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
"
>Seating & Tables</span
>
<span
style="
--font-size: var(--font-size-sm);
--leading: var(--leading-sm);
--tracking: var(--tracking-sm);
--text: var(--color-muted-foreground);
"
>Chairs, side tables, and accent pieces.</span
>
</a>
</div>
</details>
</ui-accordion>
</div>
</details>
</ui-accordion>
</div>
<div data-mobile-menu-slot="footer">
<button data-ui="button" type="button" style="--flex: 1">
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="#" data-ui="button" data-button-variant="primary" style="--flex: 1">Get started</a>
</div>
</div>
</dialog>/**
* mobile-menu.css — Mobile menu ([data-ui~="mobile-menu"] on a [data-ui~="dialog"] <dialog>;
* slots data-mobile-menu-slot="viewport | header | body | footer")
*
* @layer variables, components
* @requires _layers.css, _variables.css, dialog.css, accordion.css
* @uses Composes [data-ui~="dialog"][data-dialog-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)
* @presets data-mobile-menu-animation="slide-right"
*/
@layer variables {
:root {
--ui-mobile-menu-bg: var(--color-background);
--ui-mobile-menu-text: var(--color-foreground);
--ui-mobile-menu-backdrop-color: var(--color-faded-foreground);
--ui-mobile-menu-header-padding-inline: var(--space-md) var(--space-xs);
--ui-mobile-menu-header-py: var(--space-xs);
--ui-mobile-menu-body-px: var(--space-sm);
--ui-mobile-menu-body-py: var(--space-md);
--ui-mobile-menu-footer-p: var(--space-sm);
--ui-mobile-menu-footer-gap: var(--space-xs);
--ui-mobile-menu-nested-accordion-pl: var(--space-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 ui.components {
/* ===========================================================================
MOBILE MENU — full-screen dialog with accordion-based nested navigation
- Composes [data-ui~="dialog"][data-dialog-size="screen"] + the accordion for expand/collapse
- No JavaScript — Invoker Commands to open, native dialog close, native details
=========================================================================== */
:where([data-ui~="mobile-menu"]) {
/* View transitions - keeps the menu stable when navigating between pages */
view-transition-name: global-mobile-menu;
inline-size: 100%;
--ui-dialog-bg: var(--ui-mobile-menu-bg);
--ui-dialog-text: var(--ui-mobile-menu-text);
overflow: clip;
}
:where([data-ui~="mobile-menu"])::backdrop {
background-color: var(--ui-mobile-menu-backdrop-color);
}
:where([data-ui~="mobile-menu"]) [data-mobile-menu-slot~="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);
}
:where([data-ui~="mobile-menu"][data-mobile-menu-animation="slide-right"])[open]
[data-mobile-menu-slot~="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));
}
}
:where([data-ui~="mobile-menu"]) [data-mobile-menu-slot~="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-py);
border-block-end: 1px solid var(--color-border);
position: sticky;
inset-block-start: 0;
background-color: var(--ui-mobile-menu-bg);
z-index: 1;
}
:where([data-ui~="mobile-menu"]) [data-mobile-menu-slot~="body"] {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: clip;
padding-inline: var(--ui-mobile-menu-body-px);
padding-block: var(--ui-mobile-menu-body-py);
max-block-size: 100%;
scrollbar-gutter: stable both-edges;
}
:where([data-ui~="mobile-menu"]) [data-mobile-menu-slot~="footer"] {
display: flex;
flex-wrap: wrap;
gap: var(--ui-mobile-menu-footer-gap);
padding: var(--ui-mobile-menu-footer-p);
border-block-start: 1px solid var(--color-border);
position: sticky;
inset-block-end: 0;
background-color: var(--ui-mobile-menu-bg);
}
/* Tighter padding for nested accordion sub-levels */
:where([data-ui~="mobile-menu"])
[data-mobile-menu-slot~="body"]
:where(ui-accordion, [data-ui~="accordion"])
:where(ui-accordion, [data-ui~="accordion"]) {
padding-inline-start: var(--ui-mobile-menu-nested-accordion-pl);
}
:where([data-ui~="mobile-menu"])
[data-mobile-menu-slot~="body"]
:where(ui-accordion, [data-ui~="accordion"])
details:not(:last-child) {
border-bottom-color: var(--color-border);
}
/* ===========================================================================
MOBILE MENU SLIDE DOWN ANIMATION
=========================================================================== */
/* Slide-right: accordion-style block-size reveal on the viewport (not scaleY). */
:where([data-ui~="mobile-menu"][data-mobile-menu-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;
}
}Attributes
| Attribute | Kind | Values | Notes |
|---|---|---|---|
data-ui="mobile-menu" | Identity | free value | Identity token in data-ui. |
data-mobile-menu-animation | Preset | slide-right | Preset: a named bundle of values. |
data-mobile-menu-slot | Slot | body footer header viewport | Slot: a part inside the primitive. |
Hooks
Set a hook on :root, on a subtree, or inline on one element. A state hook (--…--hover) themes that state only; the primitive keeps its other states.
| Hook | Default | State |
|---|---|---|
--ui-mobile-menu-backdrop-color | var(--color-faded-foreground) | — |
--ui-mobile-menu-bg | var(--color-background) | — |
--ui-mobile-menu-body-px | var(--space-sm) | — |
--ui-mobile-menu-body-py | var(--space-md) | — |
--ui-mobile-menu-footer-gap | var(--space-xs) | — |
--ui-mobile-menu-footer-p | var(--space-sm) | — |
--ui-mobile-menu-header-padding-inline | var(--space-md) var(--space-xs) | — |
--ui-mobile-menu-header-py | var(--space-xs) | — |
--ui-mobile-menu-nested-accordion-pl | var(--space-sm) | — |
--ui-mobile-menu-text | var(--color-foreground) | — |
--ui-mobile-menu-viewport-opacity--end | 1 | end |
--ui-mobile-menu-viewport-opacity--start | 0 | start |
--ui-mobile-menu-viewport-scale--end | 1 | end |
--ui-mobile-menu-viewport-scale--start | 0.98 | start |
--ui-mobile-menu-viewport-translate--end | 0, 0, 0 | end |
--ui-mobile-menu-viewport-translate--start | -2rem, 1rem, 0 | start |