Navigation Menu

Installation

›pnpm dlx shadcn@latest add @evolphin/navigation-menu

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 w-[400px]">
          <li>
            <NavigationMenuLink href="/docs">Introduction</NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/docs/installation">
              Installation
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs" className={navigationMenuTriggerStyle()}>
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

Default

Navigation menus require complex markup with multiple subcomponents. Copy the usage example above to get started, then customize the links and content.

API Reference

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the menu item to activate.
`defaultValue`	`string`	-	The default value of the menu item to activate.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`delayDuration`	`number`	`200`	The duration of the slide animation.
`orientation`	`"horizontal" \	"vertical"`	`"horizontal"`

NavigationMenuList

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

NavigationMenuItem

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the item.
`className`	`string`	-	Additional CSS classes

NavigationMenuTrigger

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

NavigationMenuContent

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Used to force mounting when more control is needed.
`className`	`string`	-	Additional CSS classes

NavigationMenuLink

Prop	Type	Default	Description
`active`	`boolean`	-	Whether the link is active.
`onSelect`	`(event: Event) => void`	-	Event handler called when the link is selected.

Search

On this page