Navigation Menu

• Home
  • Introduction
    Get started with our library.
  • Documentation
    Learn how to use components.
• Components
  • All Components

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

<NavigationMenu>
  <NavigationMenuList class="flex-wrap">
    <NavigationMenuItem>
      <NavigationMenuTrigger>Home</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[300px] gap-2">
          <li>
            <NavigationMenuLink href="/">
              <div class="font-medium">Introduction</div>
              <div class="text-muted-foreground text-sm">
                Get started with our library.
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/docs">
              <div class="font-medium">Documentation</div>
              <div class="text-muted-foreground text-sm">
                Learn how to use components.
              </div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[300px] gap-2">
          <li>
            <NavigationMenuLink href="/components">
              <div class="font-medium">All Components</div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Installation

To install the navigation menu component, run the following command:

npx shadcn@latest add @fulldev/navigation-menu

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="#">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>