Navigation Menu

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-64 gap-1 p-2">
          <li><NavigationMenuLink href="#">Introduction</NavigationMenuLink></li>
          <li><NavigationMenuLink href="#">Installation</NavigationMenuLink></li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" class={navigationMenuTriggerStyle()}>Docs</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

A site navigation menu with dropdown content panels.

Installation

railbase ui add navigation-menu

Peer dependencies:

npm install class-variance-authority

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>…links…</NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Anatomy

Exported parts: NavigationMenu · NavigationMenuList · NavigationMenuItem · navigationMenuTriggerStyle · NavigationMenuTrigger · NavigationMenuContent · NavigationMenuLink · NavigationMenuIndicator · NavigationMenuViewport