NavigationMenu

Top-level site navigation bar with dropdown mega-menus. Powered by Radix.

When to use

• Main site header — primary navigation links with sub-categories.
• Product navigation — mega-menus with rich content.
• Documentation sites — section navigation with previews.

When NOT to use

• For in-page tab switching — use Tabs.
• For right-click menus — use ContextMenu.
• For button-triggered menus — use DropdownMenu.

Import

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@mihcm/ui/NavigationMenu';

Basic usage

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/widgets">Widgets</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">About</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Standalone link with trigger style

<NavigationMenuLink className={navigationMenuTriggerStyle()} href="/docs">
  Documentation
</NavigationMenuLink>

Composition

• Each NavigationMenuItem wraps a NavigationMenuTrigger + NavigationMenuContent pair for dropdown sections.
• Use NavigationMenuLink for direct links without a dropdown.
• navigationMenuTriggerStyle() is exported as a utility to style standalone links like triggers.
• The indicator bar animates between active triggers automatically.

Related

• Tabs — in-page content switching.
• Breadcrumb — hierarchical navigation path.
• Sidebar — vertical navigation for app-level structure.
• DropdownMenu — single-button triggered menu.