import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/notchset/navigation-menu";

export function NavigationMenuExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Platform</NavigationMenuTrigger>
          <NavigationMenuContent className="w-[600px]">
            <NavigationMenuLink href="/agents">Agents</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Props

NavigationMenu–
as the primitive
value, onValueChange; delay 110ms, closeDelay 220ms (Base UI).
NavigationMenuTrigger / Content / Link–
components
As shadcn; links get a dot that pops on hover.
NavigationMenuBarLink–
link props
A top-level link with the bar's look and node.
NavigationMenuSearch–
{ docs, suggested, hotkey, onOpen }
The bar's docs combobox (⌘K).

Anatomy

Same parts as shadcn's Navigation Menu, plus BarLink and Search.
Base UI and Radix builds: your components.json picks one.
The panel sits 140px left of the active node and stays inside the bar.

NavigationMenudata-slot="navigation-menu"
The bar.
NavigationMenuTriggerdata-slot="navigation-menu-trigger"
A trigger with its node.
NavigationMenuSearchdata-slot="navigation-menu-search"
Docs search.

Source

components/ui/notchset/navigation-menu.tsx

Build for your project

Installation

Base UIpnpm dlx shadcn@latest add https://notchset.dev/r/navigation-menu.json

Radixpnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/navigation-menu.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.

Install by hand

1. Add the packages
pnpm add @base-ui/react@^1
2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/navigation-menu.tsx
- lib/beautiful-ui/notchset/navigation-menu.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
3. No stylesheet needed.
4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)

Styles didn't apply?

The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.

For coding agents

Give your coding assistant the Markdown guide instead of screenshots.

.md

Use it for

A product or marketing site's top bar with grouped destinations

Use something else when

App navigation between views: use Sidebar or Tabs

Mistakes to avoid

Give each NavigationMenuContent its width, so the panel can morph between sizes

Agents find it by

navigation menu, site nav, mega menu, header nav, navbar, shadcn navigation menu, Notchset

Where agents read it

Guide for this component: https://notchset.dev/md/navigation-menu.md
Every component, for tools without MCP: /llms.txt
MCP server: https://notchset.dev/api/mcp (setup)

Behaviour

Keyboard

← / →: Move between triggers
↓ / Enter / Space: Open and enter a panel
Esc: Close
⌘K: Focus docs search

Accessibility

The Base UI or Radix navigation menu: roving focus, ← → between triggers, Esc closes
Nodes and stems are drawn inside each trigger: right on the first frame
The search is a combobox with a listbox and aria-activedescendant

Motion

Open: The node fills, its stem rises and the drop stem falls (120ms); the panel unrolls (360ms after 110ms)
Switch: The panel moves and resizes (400ms) as content slides 24px
Hover intent: 110ms to open, 220ms to close after leaving

Responsive

The bar fills its container; the search shrinks to 120px and the ⌘K hint hides under 900px.

Performance

Panels mount only while open; morphs are CSS on width, height and position.

Changelog

v1.0.0 · 2026-10-02
First release

83 more Pro piecesEvery Pro component and chart in the same language. Previews are live for everyone; the code comes with Pro.See the plans

Navigation MenuNavigation Menu

Live preview

Usage

Props

Anatomy

Source

Installation