Navigation

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@brika/clay/components/navigation-menu';
/** Flyout navigation with two trigger menus and a plain link. */
export default function NavigationMenuDefaultDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 p-4 w-64">
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Introduction</span>
                    <span className="text-muted-foreground text-xs">Install and configure Clay.</span>
                  </a>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Theming</span>
                    <span className="text-muted-foreground text-xs">Customize your design tokens.</span>
                  </a>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 p-4 w-64">
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Button</span>
                    <span className="text-muted-foreground text-xs">Interactive action surfaces.</span>
                  </a>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Dialog</span>
                    <span className="text-muted-foreground text-xs">Modal overlays for focused tasks.</span>
                  </a>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild>
            <a href="https://example.com" className={navigationMenuTriggerStyle()}>Changelog</a>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

01 Installation

Install

Pull Navigation Menu from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { NavigationMenu } from "@brika/clay";

tsxGranular1 line

import { NavigationMenu } from "@brika/clay/components/navigation-menu";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxNavigation Menu.tsx69 lines

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@brika/clay/components/navigation-menu';
/** Flyout navigation with two trigger menus and a plain link. */
export default function NavigationMenuDefaultDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 p-4 w-64">
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Introduction</span>
                    <span className="text-muted-foreground text-xs">Install and configure Clay.</span>
                  </a>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Theming</span>
                    <span className="text-muted-foreground text-xs">Customize your design tokens.</span>
                  </a>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 p-4 w-64">
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Button</span>
                    <span className="text-muted-foreground text-xs">Interactive action surfaces.</span>
                  </a>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <a href="https://example.com" className="flex flex-col gap-1 rounded-md p-3 text-sm hover:bg-accent">
                    <span className="font-medium">Dialog</span>
                    <span className="text-muted-foreground text-xs">Modal overlays for focused tasks.</span>
                  </a>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild>
            <a href="https://example.com" className={navigationMenuTriggerStyle()}>Changelog</a>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

03 Examples

Navigation Menu, every way

Rich

Rich flyout panel containing a featured item alongside a grid of documentation links.

GitHub

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@brika/clay/components/navigation-menu';
/** Rich flyout panel containing a featured item alongside a grid of documentation links. */
export default function NavigationMenuRichDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="grid grid-cols-[180px_1fr] gap-3 p-4 w-[480px]">
              <NavigationMenuLink asChild>
                <a
                  href="https://example.com"
                  className="flex h-full flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline outline-none hover:shadow-md focus:shadow-md"
                >
                  <div className="mt-4 mb-2 text-lg font-medium">Clay</div>
                  <p className="text-muted-foreground text-sm leading-tight">
                    Pressable raw material for every Brika surface.
                  </p>
                </a>
              </NavigationMenuLink>
              <ul className="grid gap-1">
                {[
                  { title: 'Installation', desc: 'How to add Clay to your project.' },
                  { title: 'Tokens', desc: 'CSS custom properties powering every component.' },
                  { title: 'Themes', desc: 'Swap the visual layer without a rebuild.' },
                  { title: 'Contributing', desc: 'Add components and improve the library.' },
                ].map((item) => (
                  <li key={item.title}>
                    <NavigationMenuLink asChild>
                      <a href="https://example.com" className="flex flex-col gap-0.5 rounded-md p-3 text-sm hover:bg-accent">
                        <span className="font-medium">{item.title}</span>
                        <span className="text-muted-foreground text-xs">{item.desc}</span>
                      </a>
                    </NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Simple Links

Plain link items with no flyout, use `navigationMenuTriggerStyle()` for consistent sizing.

GitHub

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from '@brika/clay/components/navigation-menu';
/** Plain link items with no flyout, use `navigationMenuTriggerStyle()` for consistent sizing. */
export default function NavigationMenuSimpleLinksDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {['Docs', 'Components', 'Blog', 'Changelog'].map((label) => (
          <NavigationMenuItem key={label}>
            <NavigationMenuLink asChild>
              <a href="https://example.com" className={navigationMenuTriggerStyle()}>{label}</a>
            </NavigationMenuLink>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  );
}

04 Accessibility

Accessibility

Arrow keys move between top-level items; Enter/Space opens flyout panels.
Active link state is indicated via data-active; ensure aria-current="page" is also set for AT.
Flyout panels are dismissed by moving focus outside or pressing Escape.
Use NavigationMenuLink with asChild for router-link integration.

05 Tokens 16 theme-overridable

Theme tokens

Every CSS variable Navigation Menu reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Navigation Menu without touching component code.

Navigation Menu tokens

16 tokens

ColorFill, border, and text colors.4

--navigation-menu-containercolorvar(--background)
components.navigationMenu.container
Resting background of the navigation-menu trigger.
--navigation-menu-focus-containercolorvar(--accent)
components.navigationMenu.focusContainer
Background of the navigation-menu trigger under hover / focus. Active and open states use this color at 50% opacity.
--navigation-menu-focus-labelcolorvar(--accent-foreground)
components.navigationMenu.focusLabel
Foreground color of the navigation-menu trigger under hover / focus.
--navigation-menu-indicator-colorcolorvar(--border)
components.navigationMenu.indicatorColor
Color of the navigation-menu indicator arrow shown beneath the active trigger.

GeometrySizes, lengths, and corner radii.4

--navigation-menu-radiusradiusvar(--radius-control)
components.navigationMenu.radius
Navigation menu trigger corner radius.
--navigation-menu-heightsize2.25rem
components.navigationMenu.height
Default navigation-menu height.
--navigation-menu-padding-xsizecalc(var(--spacing) * 4)
components.navigationMenu.paddingX
Inline padding inside the navigation-menu.
--navigation-menu-padding-ysizecalc(var(--spacing) * 2)
components.navigationMenu.paddingY
Block padding inside the navigation-menu.

TypographyTypeface, size, weight, spacing.6

--navigation-menu-font-familyfont-familyvar(--font-sans)
components.navigationMenu.fontFamily
Typeface for navigation-menu.
--navigation-menu-font-sizefont-sizevar(--text-body-md)
components.navigationMenu.fontSize
Font size for navigation-menu.
--navigation-menu-font-weightfont-weight500
components.navigationMenu.fontWeight
Font weight for navigation-menu.
--navigation-menu-line-heightline-height1.25
components.navigationMenu.lineHeight
Line height for navigation-menu.
--navigation-menu-letter-spacingletter-spacing0
components.navigationMenu.letterSpacing
Letter spacing for navigation-menu. Useful for caps labels.
--navigation-menu-text-transformtext-transformnone
components.navigationMenu.textTransform
Text transform for navigation-menu (`uppercase`, `lowercase`, `capitalize`, `none`).

MotionAnimation duration and easing.2

--navigation-menu-durationdurationvar(--motion-standard-duration)
components.navigationMenu.duration
Transition duration for navigation-menu state changes.
--navigation-menu-easingeasingvar(--motion-standard-easing)
components.navigationMenu.easing
Transition easing for navigation-menu state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.navigationMenu, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "navigationMenu": {
      "paddingX": "calc(var(--spacing) * 4)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-navigation-menu-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Navigation Menu. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<NavigationMenu />

1 prop

viewportdefault true
boolean
When true (default), renders a NavigationMenuViewport at the root for flyout panels.