Zostel
Navigation Navigation Menu

Navigation Menu

The top menu with panels — hover or click a heading, arrow keys to move (Radix).

Preview

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Places</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-1 p-3 w-[min(400px,calc(100vw-2rem))] sm:grid-cols-2">
          <li><NavigationMenuLink href="/destinations#manali">Manali</NavigationMenuLink></li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/stories" className={navigationMenuTriggerStyle()}>Stories</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Parts

NavigationMenuTrigger
Type: button
Default: —

A heading that opens its panel.

NavigationMenuContent
Type: div
Default: —

The panel. Size it to the screen (w-[min(400px,calc(100vw-2rem))]).

NavigationMenuLink
Type: a
Default: —

A link; navigationMenuTriggerStyle() makes it look like a heading.