Navigation Menu

Use navigation menu for top-level site navigation that needs dropdown flyouts, such as a marketing site header with grouped links. For a simple row of links with no flyout content, a plain nav with NavigationMenuLink-styled anchors is usually enough.

<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Products</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/products/one">Product One</NavigationMenuLink>
          <NavigationMenuLink href="/products/two">Product Two</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

Set NavigationMenu's viewport prop to false to render each item's flyout inline instead of in the shared animated viewport. Built on reka-ui's Navigation Menu.

Installation

Usage