NavDropdown

A Navbar item that opens a panel of links; a popover under the button or across the header on desktop, a row that expands in the phone menu.

Last updated

Show code
<Navbar>
<a slot="brand" href="/">Example</a>
<NavDropdown label="Resources">
  <ul class="flex list-none flex-col gap-0.5 p-2">
    <li><a href="/blog" class="block rounded-lg p-3 hover:bg-neutral-faded">Blog</a></li>
    …
  </ul>
</NavDropdown>
<NavLink href="/pricing">Pricing</NavLink>
</Navbar>

Add

npx @ava-ui/apogee add nav-dropdown

Uses @lucide/astro (ChevronDown). Zero JS: a native popover on desktop, a <details> row in the phone menu.

Usage

---
import Navbar from '@/components/apogee/Navbar/Navbar.astro'
import NavDropdown from '@/components/apogee/NavDropdown/NavDropdown.astro'
---
<Navbar>
  <a slot="brand" href="/">Example</a>
  <NavDropdown label="Products" fullWidth>
    <!-- columns of links -->
  </NavDropdown>
</Navbar>

API

Prop Type Default Description
label string — The button’s text, and the row’s in the phone menu.
fullWidth boolean false The panel spans the header instead of opening under the button.
floating boolean false With fullWidth: the panel keeps to the bar’s width, rounded; for a floating Navbar.
width string '20rem' Width of an anchored panel.
panelClass string — Extra classes on the desktop panel.
class string — Extra classes on the wrapper.

The default slot is the panel; it renders twice, in the desktop popover and in the phone row, so don’t put ids in it.

Variants

Full width, and full width in a floating Navbar:

Show code
<Navbar>
<NavDropdown label="Resources" fullWidth>…</NavDropdown>
</Navbar>
<Navbar floating>
<NavDropdown label="Resources" fullWidth floating>…</NavDropdown>
</Navbar>

States

  • Closed — the chevron points down.
  • Open — the panel shows and the chevron turns; opening another dropdown closes this one.

Examples

Every header in Header navigation uses it.

Accessibility

Key Action
Enter Space Open or close the panel (desktop) or the row (phone).
Esc Close the panel; focus returns to the button.
Tab Moves through the panel’s links after the button.
  • The button is a native popover trigger, so it reports aria-expanded.
  • Click outside or open another dropdown and the panel closes.
  • The chevron’s turn respects prefers-reduced-motion.

Tokens

Token Used for
--background-elevation-overlay / --shadow-overlay Panel surface and lift
--border-neutral Panel edge
--foreground-neutral-faded Button text at rest
--duration-fast / ease-standard Chevron turn

Do / Don’t

  • Do keep panels to links; a form or video belongs on its own page.
  • Don’t use it for a single link; use NavLink.

Content

  • Labels are one word where possible: Products, Resources, Company.

Related

NavbarA responsive site header that collapses its links into a mobile panel below the md breakpoint.
NavLinkA navigation link that auto-detects and styles the current route, with prefix matching, external links and a collapsible NavGroup.
PopoverRich content on click, built on the native Popover API — top layer and light dismiss for free, anchored with CSS anchor positioning.