NavigationMenu

A collection of navigation links and disclosure menus, typically used for the primary site header. `NavigationMenuRoot` owns the open state and hover/click timing for the whole menu, rendering as a `<nav>` landmark and providing context to every list, item, trigger, content, viewport, and indicator beneath it. Reach for it over a generic dropdown when you need keyboard-accessible, animatable mega-menu panels that share a single active state.

Nests a second navigation menu inside a `NavigationMenuContent` panel, with its own independent active value while inheriting the parent's timing and direction. Use it to build multi-level menus where a content panel itself contains a list of triggers and sub-panels.

The horizontal (or vertical) list of menu items. Renders a `RovingFocusGroup` inside a positioned wrapper that also serves as the track for `NavigationMenuIndicator`. Place one directly inside `NavigationMenuRoot` (or `NavigationMenuSub`) to hold its `NavigationMenuItem`s.

No props or events — renders its element and forwards attributes.

A single entry in a `NavigationMenuList`. Groups one trigger (or link) with its associated content panel under a shared `value`, and provides the per-item context that wires focus, tab order, and open state between them.

The button that opens its item's `NavigationMenuContent` on hover, click, or keyboard. Reflects open state via `data-state` and `aria-expanded`, and manages the hover/click timing handshake with the root. Use it inside a `NavigationMenuItem` for entries that reveal a panel; use `NavigationMenuLink` instead for plain navigation links.

A navigable link, rendered as an `<a>` by default, usable as a top-level menu item or inside a content panel. Selecting it dismisses the open menu (unless the `select` event is prevented) and marks itself with `aria-current` when `active`.

The panel revealed when its item's trigger is active. Handles mount/unmount via `Presence`, teleports into the shared `NavigationMenuViewport` when one is present (otherwise renders inline), and keeps content alive briefly during viewport transitions. Place one per `NavigationMenuItem` that has a trigger.

An optional shared container that all `NavigationMenuContent` panels teleport into, positioned beneath the active trigger and sized to the open panel (exposed as CSS variables for animating between panels). Render one inside `NavigationMenuRoot` for a single animated mega-menu surface; omit it to render each content inline.

An optional visual cue (e.g. an arrow or underline) that tracks the currently active trigger. It teleports into the `NavigationMenuList` wrapper and exposes the active trigger's size and position as CSS variables for animated highlighting.