Skip to content

Navigation Menu

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

const components = [
  {
    title: "Alert",
    href: "/docs/components/alert/",
    description:
      "Displays important messages with title and description content.",
  },
  {
    title: "Sheet",
    href: "/docs/components/sheet/",
    description: "A side panel component built on top of dialog primitives.",
  },
  {
    title: "Native Select",
    href: "/docs/components/native-select/",
    description:
      "A styled native select element for choosing one option from a list.",
  },
  {
    title: "Tabs",
    href: "/docs/components/tabs/",
    description: "A set of layered sections of content displayed one at a time.",
  },
]
---

<NavigationMenu>
  <NavigationMenuList class="flex-wrap gap-1">
    <NavigationMenuItem value="getting-started">
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="w-96 p-1">
          <li>
            <NavigationMenuLink href="/docs" class="w-full flex-col items-start">
              <span class="font-medium leading-none">Introduction</span>
              <span class="text-muted-foreground line-clamp-2 text-sm">
                Re-usable components built with Tailwind CSS.
              </span>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink
              href="/docs/installation/"
              class="w-full flex-col items-start"
            >
              <span class="font-medium leading-none">Installation</span>
              <span class="text-muted-foreground line-clamp-2 text-sm">
                How to install dependencies and structure your app.
              </span>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink
              href="/docs/"
              class="w-full flex-col items-start"
            >
              <span class="font-medium leading-none">Typography</span>
              <span class="text-muted-foreground line-clamp-2 text-sm">
                Styles for headings, paragraphs, lists, and more.
              </span>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="components" class="hidden md:block">
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[400px] gap-2 p-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
          {
            components.map((component) => (
              <li>
                <NavigationMenuLink href={component.href} class="w-full flex-col items-start">
                  <span class="font-medium leading-none">{component.title}</span>
                  <span class="text-muted-foreground line-clamp-2 text-sm">
                    {component.description}
                  </span>
                </NavigationMenuLink>
              </li>
            ))
          }
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="docs">
      <NavigationMenuLink href="/docs" class={navigationMenuTriggerStyle()}>
        Docs
      </NavigationMenuLink>
    </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,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="item-one">
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="docs">
      <NavigationMenuLink href="/docs" class={navigationMenuTriggerStyle()}>
        Docs
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>