Design System/Atoms/Navigation Menu

Navigation Menu

Horizontal navigation with rich dropdown panels. Supports direct content dropdowns and animated viewport transitions.

When To Use

  • Use Navigation Menu when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Key exports

NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink

Example Code

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

<NavigationMenu>
  <NavigationMenuList>
    {/* Products — rich card dropdown */}
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div className="grid w-[480px] grid-cols-3 gap-1 p-3">
          <ProductCard
            icon={<Box size={16} />}
            title="Components"
            description="Reusable UI building blocks"
          />
// ...trimmed for docs

Navigation Menu · Variants

Horizontal navigation

Products and Developers dropdowns with rich content, plus plain nav links

With viewport

Animated floating viewport panel with cross-fade transitions between items