ComponentsNavigation Menu

Navigation Menu

Displays an animated navigation menu, respecting user motion preferences.

Usage

import {
  NavigationMenuListItem,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink href="#">Link</NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Trigger</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuListItem>Link One</NavigationMenuListItem>
        <NavigationMenuListItem>Link Two</NavigationMenuListItem>
        <NavigationMenuListItem>Link Three</NavigationMenuListItem>
        <NavigationMenuListItem>Link Four</NavigationMenuListItem>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#">Link</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Installation

npx @luxeui/ui@beta add navigation-menu