sc1m/design
ComponentsNavigation Menu

Navigation Menu

Navigation Menu component built on Base UI, styled with sc1m tokens.

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/navigation-menu

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Composition

Every part is a separate export. NavigationMenu owns state; the rest are presentational and must appear in this order.

NavigationMenu├── NavigationMenuList│   └── NavigationMenuItem│       ├── NavigationMenuTrigger│       ├── NavigationMenuContent│       └── NavigationMenuLink└── NavigationMenuViewport

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <p className="text-sm text-fg-muted">
          Browse our product catalog.
        </p>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
      <NavigationMenuContent>
        <p className="text-sm text-fg-muted">
          Guides, docs, and tutorials.
        </p>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#pricing">Pricing</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
  <NavigationMenuViewport />
</NavigationMenu>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription
actionsRefReact.RefObject<NavigationMenuRoot.Actions | null>—A ref to imperative actions.
onOpenChangeComplete((open: boolean) => void)—Event handler called after any animations complete when the navigation menu is closed.
valueValue | nullnullThe controlled value of the navigation menu item that should be currently open.
defaultValueValue | nullnullThe uncontrolled value of the item that should be initially selected.
onValueChange((value: Value | null, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void)—Callback fired when the value changes.
delaynumber50How long to wait before opening the navigation popup.
closeDelaynumber50How long to wait before closing the navigation popup.
orientation'horizontal' | 'vertical''horizontal'The orientation of the navigation menu.
PropTypeDefaultDescription
valueany—A unique value that identifies this navigation menu item.
PropTypeDefaultDescription
activebooleanfalseWhether the link is the currently active page.
closeOnClickbooleanfalseWhether to close the navigation menu when the link is clicked.
PropTypeDefaultDescription
keepMountedbooleanfalseWhether to keep the content mounted in the DOM while the popup is closed.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Navigation Menu — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to
--brand-radius-lgNavigationMenuViewport
--brand-radius-smNavigationMenuTrigger, NavigationMenuLink
--fgNavigationMenuTrigger, NavigationMenuLink, NavigationMenuContent
--lineNavigationMenuViewport
--shadow-overlayNavigationMenuViewport
--surfaceNavigationMenuTrigger, NavigationMenuLink
--surface-raisedNavigationMenuViewport

Source

src/components/ui/navigation-menu/navigation-menu.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Meter

Meter component built on Base UI, styled with sc1m tokens.

Number Field

Number Field component built on Base UI, styled with sc1m tokens.

On this page

Live previewInstallationUsageCompositionExampleAPI referenceNavigationMenuNavigationMenuItemNavigationMenuLinkNavigationMenuContentAccessibilityDesign tokensSource