Marble UI
← Components

Navigation Menu

Preview: Default

Site header navigation with rich flyout panels that morph between triggers (Base UI Navigation Menu).

Import

import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuCard } from '@marbleui/ui'

Props

<NavigationMenu>

PropTypeDefaultDescription
children *requiredReactNode—
classNamestring—

<NavigationMenuItem>

PropTypeDefaultDescription
children *requiredReactNode—
label *requiredReactNode—

<NavigationMenuCard>

Title + description pair for flyout links.

PropTypeDefaultDescription
title *requiredReactNode—
descriptionReactNode—
iconReactNode—

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: Base UI NavigationMenu. Follow the primitive's docs for the full keyboard map.

Usage notes

Site header navigation whose triggers open rich flyout panels that morph between each other. For a simple row of links use Navbar; for an app-style File/Edit bar use Menubar.

<NavigationMenu>
  <NavigationMenuItem label="Product">
    <NavigationMenuLink href="/analytics">
      <NavigationMenuCard title="Analytics" description="Dashboards and funnels." />
    </NavigationMenuLink>
  </NavigationMenuItem>
  <NavigationMenuLink href="/pricing" plain>Pricing</NavigationMenuLink>
</NavigationMenu>
  • Built on Base UI Navigation Menu. NavigationMenuItem takes a label and the panel content as children.
  • Inside a panel use NavigationMenuLink with NavigationMenuCard (title, description, icon). With plain the link becomes a top-level item beside the triggers.
  • Give panels an explicit width (for example w-64) as content sizes the shared popup.
  • It has no built-in mobile layout; switch to Navbar or Sidebar on small screens.
Example source · show
import { NavigationMenu, NavigationMenuCard, NavigationMenuItem, NavigationMenuLink } from './navigation-menu'

const I = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <path d={d} />
  </svg>
)

export const styles = {
  Default: () => (
    <div className="flex h-72 items-start">
      <NavigationMenu>
        <NavigationMenuItem label="Product">
          <div className="grid w-[30rem] grid-cols-2 gap-1">
            <NavigationMenuLink href="#"><NavigationMenuCard icon={<I d="M3 3v18h18M7 16l4-4 4 4 5-6" />} title="Analytics" description="Dashboards and funnels." /></NavigationMenuLink>
            <NavigationMenuLink href="#"><NavigationMenuCard icon={<I d="M12 2v20M2 12h20" />} title="Automations" description="Trigger workflows on events." /></NavigationMenuLink>
            <NavigationMenuLink href="#"><NavigationMenuCard icon={<I d="M4 4h16v16H4zM4 10h16" />} title="Reports" description="Scheduled PDF exports." /></NavigationMenuLink>
            <NavigationMenuLink href="#"><NavigationMenuCard icon={<I d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20" />} title="Integrations" description="200+ connected apps." /></NavigationMenuLink>
          </div>
        </NavigationMenuItem>
        <NavigationMenuItem label="Resources">
          <div className="flex w-64 flex-col gap-1">
            <NavigationMenuLink href="#"><NavigationMenuCard title="Docs" description="Guides and API reference." /></NavigationMenuLink>
            <NavigationMenuLink href="#"><NavigationMenuCard title="Changelog" description="What shipped this week." /></NavigationMenuLink>
          </div>
        </NavigationMenuItem>
        <NavigationMenuLink href="#" plain>Pricing</NavigationMenuLink>
      </NavigationMenu>
    </div>
  ),
}

Source: packages/ui/src/navigation-menu/navigation-menu.tsx

Catalog

Category
navigation
Priority
Core
Primitive
base-ui
Base UI
Navigation Menu