Navigation Menu

A collection of links for navigating websites.

Examples

Default

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid gap-3 p-6 w-100">
          <li class="row-span-3">
            <NavigationMenuLink class="flex h-full w-full select-none flex-col justify-end rounded-md bg-linear-to-b from-muted to-muted/50 p-6 no-underline outline-none focus:shadow-md">
              <div class="mb-2 mt-4 text-lg font-medium">Link Title</div>
              <p class="text-sm leading-tight text-muted-foreground">Link description goes here.</p>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
              <div class="text-sm font-medium leading-none">Link Two</div>
              <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">Description for link two.</p>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Props

NavigationMenu

Prop	Type	Default	Description
model-value	string	-	The value of the currently selected menu item
delay-duration	number	200	The duration in ms before opening a submenu
skip-delay-duration	number	300	The duration in ms before skipping the delay
dir	string	'ltr'	The reading direction of the menu
orientation	string	'horizontal'	The orientation of the menu

NavigationMenuLink

Prop	Type	Default	Description
as	string	'a'	The component to render as
active	boolean	false	Whether the link is active

Slots

NavigationMenu

Slot	Description
default	The content of the navigation menu
viewport	The viewport slot (optional)

NavigationMenuLink

Slot	Description
default	The link content

NavigationMenuContent

Slot	Description
default	The content of the menu item.

NavigationMenuTrigger

Slot	Description
default	The content of the trigger.