Navigation Menu
A horizontal navigation bar with dropdown submenus.
navigation-menu-demo.app
Installation
terminal.sh
npx y2kui@latest add navigation-menuUsage
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/product-1">Product 1</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Props
| Prop | Type | Default | Description |
|---|---|---|---|
NavigationMenuTrigger | ReactNode | — | Opens the submenu on hover/focus. |
NavigationMenuContent | ReactNode | — | Dropdown panel content. |
NavigationMenuLink | { href: string } | — | Clickable link within the menu. |
NavigationMenuList | ReactNode | — | Flex container for menu items. |