Krawma Design System

Navigation Menu

uistable

Navigation Menu — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/navigation-menu

npm: class-variance-authority@^0.7.1, lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States
openclosedactivefocus-visible
Keyboard
EnterSpaceArrowLeftArrowRightArrowDownEscapeHomeEnd
Depends on
utils

Purpose

A horizontal site/app navigation bar with optional rich dropdown panels (mega-menu style) for grouped links. For in-app view switching use tabs; for action menus use dropdown-menu.

Anatomy

NavigationMenu › NavigationMenuList › NavigationMenuItem with NavigationMenuTrigger + NavigationMenuContent (dropdown), or NavigationMenuLink (direct link). navigationMenuTriggerStyle() styles standalone links to match.

Style

No variants — token-backed bar; triggers reveal an animated content panel with a viewport indicator.

Behavior & functionality

Hover/focus/click opens a trigger's panel (one at a time); links navigate. Content panels hold grouped NavigationMenuLinks.

Accessibility

  • Menubar-style keyboard support: arrows move between items and into panels, Enter/Space open, Escape closes; the current page's link should carry aria-current="page".
  • Panels are reachable by keyboard, not hover-only.

Do / Don't

  • ✅ Use for top-level site navigation with grouped destinations.
  • ❌ Don't use for switching panels on the same page — that's tabs.