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>/** * _mobile-menu.css — Mobile menu (.mobile-menu) * * @layer variables, components * @requires layers.css, _variables.css, _dialog.css, _accordion.css * @uses Composes .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 --dialog-* motion tokens for slide-right variant * @tokens --mobile-menu-* (@layer variables) */@layer variables { :root { --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); --mobile-menu-viewport-opacity--start: 0; --mobile-menu-viewport-opacity--end: 1; --mobile-menu-viewport-scale--start: 0.98; --mobile-menu-viewport-scale--end: 1; --mobile-menu-viewport-translate--start: -2rem, 1rem, 0; --mobile-menu-viewport-translate--end: 0, 0, 0; }}@layer zazz.components { /* =========================================================================== MOBILE MENU — full-screen dialog with accordion-based nested navigation - Composes .dialog[data-size="screen"] + .accordion for expand/collapse - No JavaScript — Invoker Commands to open, native dialog close, native details =========================================================================== */ .mobile-menu { /* View transitions - keeps the menu stable when navigating between pages */ view-transition-name: global-mobile-menu; inline-size: 100%; --dialog-background: var(--mobile-menu-background); --dialog-foreground: var(--mobile-menu-foreground); overflow: clip; } .mobile-menu::backdrop { background-color: var(--mobile-menu-backdrop); } .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(--dialog-transition-duration); transition-delay: calc(var(--dialog-transition-duration) / 1.5); } .mobile-menu[data-animation="slide-right"][open] .mobile-menu__viewport { opacity: var(--mobile-menu-viewport-opacity--end); transform: scale(var(--mobile-menu-viewport-scale--end)) translate3d(var(--mobile-menu-viewport-translate--end)); @starting-style { opacity: var(--mobile-menu-viewport-opacity--start); transform: scale(var(--mobile-menu-viewport-scale--start)) translate3d(var(--mobile-menu-viewport-translate--start)); } } .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--mobile-menu-header-padding-inline); padding-block: var(--mobile-menu-header-padding-block); border-bottom: 1px solid var(--border); position: sticky; top: 0; background-color: var(--mobile-menu-background); z-index: 1; } .mobile-menu__body { display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; padding-inline: var(--mobile-menu-body-padding-inline); padding-block: var(--mobile-menu-body-padding-block); max-block-size: 100%; scrollbar-gutter: stable both-edges; } .mobile-menu__footer { display: flex; flex-wrap: wrap; gap: var(--mobile-menu-footer-gap); padding: var(--mobile-menu-footer-padding); border-top: 1px solid var(--border); position: sticky; bottom: 0; background-color: var(--mobile-menu-background); } /* Nested accordion inside mobile menu — tighter padding for sub-levels */ .mobile-menu__body .accordion .accordion { padding-inline-start: var(--mobile-menu-nested-accordion-padding-inline-start); } .mobile-menu__body .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). */ .mobile-menu[data-animation="slide-right"] { --dialog-transition-duration: calc(var(--default-transition-duration) * 1.75); --dialog-opacity--start: 1; --dialog-scale--start: 1; --dialog-translate--start: -100%, 0, 0; --dialog-translate--end: 0, 0, 0; overflow: clip; transform-origin: left center; }}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.