PlumUI

Navigation Menu

Site navigation with rich dropdowns. A hover pill glides between items, the panel morphs to fit each menu and content slides in from the side you came from.

NavigationRadix Navigation Menu

Playground

Tweak the props, the preview and the code follow.

Props
200
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="product">
      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/deploy">Deploy</NavigationMenuLink>
        <NavigationMenuLink href="/functions">Functions</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="pricing">
      <NavigationMenuLink href="/pricing" className={navigationMenuTriggerStyle()}>
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Installation

npx @plumsydev/plum-ui add navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="product">
      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/deploy">Deploy</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="pricing">
      <NavigationMenuLink href="/pricing" className={navigationMenuTriggerStyle()}>
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

In a header

Controlled with value — glide from one item to the next without the panel closing.

northwind

Hover the menu, then glide between items

Without viewport

viewport={false} renders each panel under its own trigger.

API Reference

NavigationMenu

PropTypeDefault
viewport

Render content in a shared panel that morphs between menus.

booleantrue
value

Controlled open item.

string—
onValueChange

Called when the open item changes.

(value: string) => void—
delayDuration

Hover delay before opening, in ms.

number200

NavigationMenuLink

A link styled as a card row inside content. Add navigationMenuTriggerStyle() to use it at the top level.

PropTypeDefault
active

Marks the current page.

boolean—

Notes

  • Give each NavigationMenuItem a value — it powers both the hover pill and controlled mode.
PreviousMenubarNextNumber Input