Navigation Menu

Navigation menus connect the major areas of a website or product. Use the trigger for a grouped set of links and use a direct NavigationMenuLink for destinations that do not need a flyout.

Show codeCopy

Import

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@workshop1/ui/components/navigation-menu"

Composition

Place NavigationMenuItem inside NavigationMenuList. A grouped item pairs NavigationMenuTrigger with NavigationMenuContent; a direct destination uses NavigationMenuLink with variant="trigger" when it should align with the trigger row. The default viewport renders one shared positioned panel for content. Set viewport={false} when the content must position inside each item, such as a compact local navigation.

Use NavigationMenuLink asChild when integrating with the app router so the router's link remains the actual interactive element. NavigationMenuIndicator is available when the design needs a visible pointer to the active panel.

Variants

Set variant="inverse" when the menu sits on a primary-coloured surface, such as the Workshop1 marketing navigation. The shared styles adjust hover, focus, and open states for the darker background.

Accessibility

Use meaningful link text and preserve a visible focus ring. The primitive manages the menu role, trigger state, focus movement, and Escape dismissal. Provide a mobile navigation pattern when the horizontal list cannot fit; do not rely on hover alone to reveal destinations.

Best practices

• Keep top-level navigation labels stable and predictable across pages.
• Use a grouped panel for related destinations and add short descriptions only when they help users choose.
• Use direct links for single destinations instead of creating a one-item flyout.
• Keep the content panel concise; move a large sitemap to a dedicated navigation page.