Navigation Menu

Import

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "@timelycare/helix-ui"

Props

interface NavigationMenuTriggerProps {
  children: React.ReactNode
  className?: string
}

interface NavigationMenuLinkProps {
  href: string
  children: React.ReactNode
  className?: string
}

Design Tokens

Root Container

Trigger/Link Button

Content Popover

Menu Link Item

Icons

Chevron Size: h-3 w-3 (12px) Icon in Simple List: h-4 w-4 (16px), text-muted-foreground

// Chevron rotates automatically on open via data-state
<ChevronDown className="h-3 w-3 transition-transform group-data-[state=open]:rotate-180" />

Content Layout Types

States

Note: Description text stays text-muted-foreground on hover.

Common Patterns

Basic Navigation

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-2 p-2 w-[320px]">
          <ListItem href="/docs" title="Introduction">
            Re-usable components built with Radix UI.
          </ListItem>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs" className={navigationMenuTriggerStyle()}>
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

ListItem Helper

const ListItem = ({ title, children, href }) => (
  <li>
    <NavigationMenuLink asChild>
      <a href={href} className="block p-2 rounded-sm hover:bg-accent group">
        <div className="text-sm font-medium group-hover:text-accent-foreground">{title}</div>
        <p className="text-sm text-muted-foreground">{children}</p>
      </a>
    </NavigationMenuLink>
  </li>
)

Two Column Grid

<NavigationMenuContent>
  <ul className="grid grid-cols-2 gap-2 p-2 w-[512px]">
    <ListItem title="Alert Dialog">Modal dialogs.</ListItem>
    <ListItem title="Hover Card">Preview on hover.</ListItem>
  </ul>
</NavigationMenuContent>

With Featured Hero

<NavigationMenuContent>
  <div className="flex gap-2 p-2 w-[518px]">
    <div className="w-[210px] rounded-sm bg-gradient-to-b from-muted/50 to-muted p-6 flex flex-col justify-end">
      <h3 className="text-lg font-medium">shadcn/ui</h3>
      <p className="text-sm text-muted-foreground">Beautiful components.</p>
    </div>
    <ul className="flex-1 grid gap-2">
      <ListItem title="Introduction">Getting started.</ListItem>
    </ul>
  </div>
</NavigationMenuContent>

Accessibility

• Built on Radix NavigationMenu — handles keyboard and focus automatically
• Keyboard: Arrow keys to navigate triggers, Enter/Space to activate, Escape to close submenus
• Screen reader: announces navigation role
• Uses aria-current="page" for active links

Gotchas

See Also

• Related Components: Sidebar (side navigation), Breadcrumb (location context)
• Accessibility: Navigation Accessibility — Navigation ARIA patterns

Last updated: February 9, 2026