Navigation Menu

Basic Usage

A horizontal navigation bar. Each item with an href renders a real <a> (crawlable for SEO); external links get an icon and rel automatically.

Animated Highlight v2

With highlight, a single indicator bar slides to the active item and resizes to match it (powered by a resize observer). Click the items below to watch it move.

Dropdown / Mega Menu

Items with children open a dropdown on hover or click. Children support icons and descriptions for a mega-menu layout. Keyboard, focus and dismissal are handled by the primitive.

Grouped Columns

A mega-menu child with its own children renders as a labeled column (section header + links), for larger navigation menus.

Variants

pill (default) vs link. With highlight, an indicator bar slides to and resizes with the active item.

Colors

Badges & Disabled

Add a badge (count or BadgeProps) to an item; disabled items are non-interactive.

Groups

Pass an array of arrays to render separated groups.

Vertical

Vertical menus render a <nav> landmark with inline expandable sections. type="multiple" (default) keeps several open; type="single" closes others.

Collapsed Rail

A vertical menu with collapsed shows icons only; labels surface via tooltip.

Responsive Drawer

With drawer, the menu collapses into a toggle button + Drawer below mobileBreakpoint (default 768px). On desktop it stays a horizontal menu; resize the window below 768px to see it swap to a toggle button + Drawer. It auto-closes on navigation.

Always-on drawer (stress test)

Set mobileBreakpoint to (min-width: 0px) to keep the drawer at every width, so you can exercise it on desktop too. This heavy set mixes section labels, mega-menus (with descriptions), grouped-column submenus, badges, an external link and a disabled item, plus enough entries to force the drawer to scroll. Panel width stays fixed while sections expand/collapse.

Avatars & Status Chips

Items accept an avatar (leading) and a chip status dot, useful for account or team switchers.

Custom Dropdown Content

Replace a dropdown's body entirely with the itemContent snippet for a fully custom mega-menu (promos, grids, media).

List Slots & Arrow

Add content around the items with listLeading / listTrailing, and point an arrow at the open dropdown.

SaaS Marketing Header

Documentation Sidebar

Horizontal Overflow

When a horizontal menu has more items than fit its container, it scrolls sideways instead of squeezing items: labels never collapse to bare icons, and mega-menus still open below (the dropdown is not clipped by the scroll area). The narrow frame below forces the overflow. Scroll it horizontally, then open Products.

Bottom Tab Bar

With stacked on a horizontal menu, each item stacks its icon over a small label and the tabs share the width equally, like a mobile app's bottom bar. A badge collapses to a dot on the icon (see Library).

Rail With Labels

With stacked on a vertical menu, the rail stays compact but keeps a small label under each icon, so no tooltip is needed.

Trailing Actions On Hover

The itemActions snippet adds interactive controls (a DropdownMenu, an add button) that appear on row hover, like Notion or Linear. They render outside the anchor so the menu stays valid and clickable. Hover a row to reveal its menu; group headers show an add button.

Dashboard Rail (collapsible)