Avala Design
← Components/primitives

NavigationMenu

Wraps Radix NavigationMenu. Used for top-level site navigation with dropdown menus (header nav, mega menus). Preserves the legacy @avala/ui NavigationMenu API surface for marketing-site migration.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink } from "@avala/design";

<NavigationMenu>
  <NavigationMenuContent />
  <NavigationMenuItem />
  <NavigationMenuLink />
</NavigationMenu>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-navigationmenu--defaultOpen in Storybook →

When to use

  • Top-level header navigation across marketing / investor / learning surfaces.
  • Mega-menu dropdowns where each top item reveals a structured panel of links.
  • Mixed plain-link + dropdown headers.

When not to use

  • Action menus anchored to a button → use `DropdownMenu`.
  • Inline tab navigation within a page → use `Tabs`.
  • Sidebar / shell-level nav → use the admin-sidebar or ui-shell layout components.