Navigation Menu

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/navigation-menu.json

npx shadcn@latest add https://prototyper-ui.com/r/navigation-menu.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/navigation-menu.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/navigation-menu.json

This will add the following files to your project:

components/ui/navigation-menu.tsx

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs">
          Documentation
        </NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">About</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Anatomy

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Sub-component	`data-slot`	Purpose	Required
`NavigationMenu`	`navigation-menu`	Root provider, manages open state and renders the positioner	Yes
`NavigationMenuList`	`navigation-menu-list`	Container for menu items	Yes
`NavigationMenuItem`	`navigation-menu-item`	Wraps a single trigger + content pair or a standalone link	Yes
`NavigationMenuTrigger`	`navigation-menu-trigger`	Button that opens a dropdown content area	No
`NavigationMenuContent`	`navigation-menu-content`	Dropdown panel associated with a trigger	No
`NavigationMenuLink`	`navigation-menu-link`	Link item inside the content or used standalone	No
`NavigationMenuPositioner`	`navigation-menu-positioner`	Positions the popup relative to the trigger (rendered by root)	Auto
`NavigationMenuIndicator`	`navigation-menu-indicator`	Optional visual indicator arrow	No

Examples

With Dropdowns

Styling

Data Slots

Use data-slot attributes to target specific parts of the navigation menu:

Slot name	Element
`navigation-menu`	Root wrapper
`navigation-menu-list`	Container for items
`navigation-menu-item`	Individual item wrapper
`navigation-menu-trigger`	Trigger button that opens content
`navigation-menu-content`	Dropdown content panel
`navigation-menu-link`	Link inside content or standalone
`navigation-menu-positioner`	Floating positioner element
`navigation-menu-popup`	Popup container within the positioner
`navigation-menu-viewport`	Viewport inside the popup
`navigation-menu-indicator`	Optional indicator arrow
`navigation-menu-indicator-arrow`	Arrow element inside the indicator

Customization Examples

/* Wider dropdown content */
[data-slot="navigation-menu-content"] {
  @apply p-4;
}

/* Custom trigger active state */
[data-slot="navigation-menu-trigger"][data-popup-open] {
  @apply bg-primary text-primary-foreground;
}

{/* Style the navigation menu list with additional gap */}
<NavigationMenuList className="gap-1">
  <NavigationMenuItem>
    <NavigationMenuTrigger>Item</NavigationMenuTrigger>
    <NavigationMenuContent>...</NavigationMenuContent>
  </NavigationMenuItem>
</NavigationMenuList>

API Reference

NavigationMenuList

Container for navigation menu items.

Prop

Type

All Base UI NavigationMenu.List props are forwarded via ...props.

NavigationMenuItem

Wraps a trigger + content pair or a standalone link.

Prop

Type

All Base UI NavigationMenu.Item props are forwarded via ...props.

NavigationMenuTrigger

Button that opens the associated dropdown content.

Prop

Type

All Base UI NavigationMenu.Trigger props are forwarded via ...props.

NavigationMenuContent

Dropdown panel shown when its associated trigger is activated.

Prop

Type

All Base UI NavigationMenu.Content props are forwarded via ...props.

NavigationMenuLink

A link element inside the navigation menu. Can be used within content dropdowns or as a standalone item.

Prop

Type

All Base UI NavigationMenu.Link props are forwarded via ...props.

NavigationMenuPositioner

Controls the position of the popup. Rendered automatically by NavigationMenu; you do not need to add it manually.

Prop

Type

NavigationMenuIndicator

Optional visual indicator arrow displayed below the active trigger.

Prop

Type

All Base UI NavigationMenu.Icon props are forwarded via ...props.

navigationMenuTriggerStyle

A cva helper exported for use outside of the <NavigationMenuTrigger> component (e.g., applying trigger styles to standalone links).

import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"

<NavigationMenuLink href="/docs" className={navigationMenuTriggerStyle()}>
  Documentation
</NavigationMenuLink>

Accessibility

Keyboard Interactions

Key	Action
`Space`	Opens the dropdown when a trigger is focused
`Enter`	Opens the dropdown when a trigger is focused, activates links
`ArrowDown`	Opens the dropdown from a trigger; moves focus within content
`ArrowUp`	Moves focus within content
`ArrowRight`	Moves focus to the next trigger in the list
`ArrowLeft`	Moves focus to the previous trigger in the list
`Home`	Moves focus to the first trigger
`End`	Moves focus to the last trigger
`Escape`	Closes the open dropdown and returns focus to the trigger
`Tab`	Moves focus out of the navigation menu, closing any open dropdown

ARIA Attributes

The root element renders with role="navigation".
Each trigger renders with aria-expanded and aria-haspopup attributes.
The content panel is linked to its trigger via aria-controls.
Links render with role="link".
Active links can be marked with data-active="true" for aria-current behavior.

On this page