Navigation Menu

Overview

Built on Radix UI's NavigationMenu primitive. Supports dropdown menus that render in an animated viewport below the trigger. Set viewport={false} to render content inline (e.g., for a sidebar).

Usage

import { NavigationMenu } from "@leanicon/web-builder-library";

<NavigationMenu>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <ul className="grid w-48 gap-1 p-2">
          <li>
            <NavigationMenu.Link href="#">Product A</NavigationMenu.Link>
          </li>
        </ul>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="#">Pricing</NavigationMenu.Link>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu>;

Variants

With dropdown

Multiple dropdowns

Links only (no dropdowns)

Without viewport (inline content)

Set viewport={false} to render dropdown content inline below the trigger instead of in a shared viewport. Useful for sidebar navigation.

Wide content panel

Notes

• navigationMenuTriggerStyle is exported as a CVA class factory for custom trigger elements.
• NavigationMenu.Link marks the active link with data-active="true" for styling.
• viewport={false} renders content inline — useful for sidebar or non-standard layouts.
• Dark mode is handled via semantic tokens.