# 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.

URL: https://apogee.avaui.dev/docs/nav-dropdown
Last updated: 2026-10-21

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 October 21, 2026

```astro
<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

```sh
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

```astro
---
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:

```astro
<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](https://apogee.avaui.dev/docs/header-navigation-sections) 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.

](https://apogee.avaui.dev/docs/navbar)[

NavLinkA navigation link that auto-detects and styles the current route, with prefix matching, external links and a collapsible NavGroup.

](https://apogee.avaui.dev/docs/nav-link)[

PopoverRich content on click, built on the native Popover API — top layer and light dismiss for free, anchored with CSS anchor positioning.

](https://apogee.avaui.dev/docs/popover)