ComponentsNavigation Menu

Navigation Menu

Displays an animated navigation menu, respecting user motion preferences.

Usage

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

Installation

npx @luxeui/ui@beta add navigation-menu