When to use it

Use NavigationMenu for horizontal desktop navigation bars where some items need rich dropdown panels (category grids, featured links, mega-menus) and others are plain links. It handles the full keyboard interaction model: arrow keys move between items, enter/space opens panels, and escape dismisses them.

For mobile navigation, use Sheet with a side drawer instead. NavigationMenu is designed for wide viewports where dropdowns have room to expand below the trigger row.

Slot strategy

NavigationMenu is the most deeply composed navigation primitive:

• NavigationMenu is the root. It provides context for the indicator and viewport.
• NavigationMenuList is the horizontal row of items.
• NavigationMenuItem wraps each entry in the list.
• NavigationMenuTrigger is a button that toggles a dropdown content panel. It renders a chevron automatically.
• NavigationMenuContent is the dropdown panel. It animates in below the trigger and supports arbitrary layout (grids, columns, featured cards).
• NavigationMenuLink is a styled anchor for both top-level links and links inside content panels.
• NavigationMenuIndicator is an optional animated underline that follows the active trigger.
• NavigationMenuViewport is the shared container that content panels render into. The root includes it by default.

Behavior and theming guidance

Content panels animate in with a combined fade and slide. The slide direction changes based on whether the visitor is moving left or right through the menu, which gives the navigation a spatial feel.

The trigger renders a small chevron that rotates when its panel is open. Style the content panel width explicitly (e.g. w-[400px]) to keep layouts predictable across different category counts.

For mega-menu patterns, use CSS grid inside NavigationMenuContent to create multi-column layouts. Keep the panel width constrained so it does not overflow narrow viewports. On smaller screens, consider hiding the NavigationMenu entirely and switching to a Sheet-based mobile menu.