Navigation Menu

Installation

npx shadcn@latest add @uqudo/navigation-menu

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[300px] gap-1 md:w-[400px]">
          <li>
            <NavigationMenuLink asChild>
              <a href="/products/identity">Identity verification</a>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
        <a href="/pricing">Pricing</a>
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Use asChild on NavigationMenuLink to render your router's link component. A link placed directly in a NavigationMenuItem gets the same look as a trigger through navigationMenuTriggerStyle().

API Reference

NavigationMenuLink

Prop

Type

Other exports

Component	Wraps	Notes
`NavigationMenuList`	`NavigationMenu.List`	Horizontal list of items.
`NavigationMenuItem`	`NavigationMenu.Item`	One entry; holds a trigger + content or a link.
`NavigationMenuTrigger`	`NavigationMenu.Trigger`	Styled with `navigationMenuTriggerStyle`, adds a chevron.
`NavigationMenuContent`	`NavigationMenu.Content`	The panel revealed by a trigger.
`NavigationMenuViewport`	`NavigationMenu.Viewport`	Rendered automatically unless `viewport={false}`.
`NavigationMenuIndicator`	`NavigationMenu.Indicator`	Optional arrow pointing at the active trigger.

navigationMenuTriggerStyle

The class-variance-authority recipe used by NavigationMenuTrigger. Call it to give a plain link the same height, padding and hover state as a trigger.

<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
  <Link href="/docs">Docs</Link>
</NavigationMenuLink>

It has no variants; pass an optional className to merge extra classes.

Data attributes

Attribute	Value
`data-slot`	`navigation-menu`, `navigation-menu-trigger`, `navigation-menu-link`, etc.
`data-viewport`	On the root: the resolved `viewport` prop.
`data-active`	On a link: `true` when `active` is set.

On this page