Navigation Menu

A horizontal navigation menu with dropdown panels for site-wide navigation links.

Preview

Usage

tsx
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "zostel-ui";

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Destinations</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/manali">
          Manali
        </NavigationMenuLink>
        <NavigationMenuLink href="/goa">
          Goa
        </NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Props

value
Type: string
Default: —

The controlled value of the active menu item.

defaultValue
Type: string
Default: —

The default active menu item value.

onValueChange
Type: (value: string) => void
Default: —

Callback fired when the active item changes.

delayDuration
Type: number
Default: 200

Delay in ms before the menu opens on hover.

orientation
Type: "horizontal" | "vertical"
Default: "horizontal"

The orientation of the navigation menu.
Previous Collapsible Next Menubar