DocsDocsSDKs

NavigationMenu

React SDK guidance for NavigationMenu.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use NavigationMenu for horizontal desktop navigation bars where some items need rich dropdown panels (category grids, featured links, mega-menus) and others are plain links. It handles the full keyboard interaction model: arrow keys move between items, enter/space opens panels, and escape dismisses them.

For mobile navigation, use Sheet with a side drawer instead. NavigationMenu is designed for wide viewports where dropdowns have room to expand below the trigger row.

Slot strategy

NavigationMenu is the most deeply composed navigation primitive:

  • NavigationMenu is the root. It provides context for the indicator and viewport.
  • NavigationMenuList is the horizontal row of items.
  • NavigationMenuItem wraps each entry in the list.
  • NavigationMenuTrigger is a button that toggles a dropdown content panel. It renders a chevron automatically.
  • NavigationMenuContent is the dropdown panel. It animates in below the trigger and supports arbitrary layout (grids, columns, featured cards).
  • NavigationMenuLink is a styled anchor for both top-level links and links inside content panels.
  • NavigationMenuIndicator is an optional animated underline that follows the active trigger.
  • NavigationMenuViewport is the shared container that content panels render into. The root includes it by default.

Links vs triggers

Use NavigationMenuLink for plain navigation destinations. Use NavigationMenuTrigger + NavigationMenuContent when the item opens a panel. Do not wrap a link inside a trigger.

Behavior and theming guidance

Content panels animate in with a combined fade and slide. The slide direction changes based on whether the visitor is moving left or right through the menu, which gives the navigation a spatial feel.

The trigger renders a small chevron that rotates when its panel is open. Style the content panel width explicitly (e.g. w-[400px]) to keep layouts predictable across different category counts.

For mega-menu patterns, use CSS grid inside NavigationMenuContent to create multi-column layouts. Keep the panel width constrained so it does not overflow narrow viewports. On smaller screens, consider hiding the NavigationMenu entirely and switching to a Sheet-based mobile menu.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=NavigationMenu.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

NavigationMenu

# NavigationMenu > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/navigation-menu](https://sdk.enad.io/components/base-ui/navigation-menu). ## When to use it Use `NavigationMenu` for horizontal desktop navigation bars where some items need rich dropdown panels (category grids, featured links, mega-menus) and others are plain links. It handles the full keyboard interaction model: arrow keys move between items, enter/space opens panels, and escape dismisses them. For mobile navigation, use `Sheet` with a side drawer instead. `NavigationMenu` is designed for wide viewports where dropdowns have room to expand below the trigger row. ## Slot strategy NavigationMenu is the most deeply composed navigation primitive: - `NavigationMenu` is the root. It provides context for the indicator and viewport. - `NavigationMenuList` is the horizontal row of items. - `NavigationMenuItem` wraps each entry in the list. - `NavigationMenuTrigger` is a button that toggles a dropdown content panel. It renders a chevron automatically. - `NavigationMenuContent` is the dropdown panel. It animates in below the trigger and supports arbitrary layout (grids, columns, featured cards). - `NavigationMenuLink` is a styled anchor for both top-level links and links inside content panels. - `NavigationMenuIndicator` is an optional animated underline that follows the active trigger. - `NavigationMenuViewport` is the shared container that content panels render into. The root includes it by default. > **Links vs triggers** > > Use `NavigationMenuLink` for plain navigation destinations. Use `NavigationMenuTrigger` + > `NavigationMenuContent` when the item opens a panel. Do not wrap a link inside a trigger. ## Behavior and theming guidance Content panels animate in with a combined fade and slide. The slide direction changes based on whether the visitor is moving left or right through the menu, which gives the navigation a spatial feel. The trigger renders a small chevron that rotates when its panel is open. Style the content panel width explicitly (e.g. `w-[400px]`) to keep layouts predictable across different category counts. For mega-menu patterns, use CSS grid inside `NavigationMenuContent` to create multi-column layouts. Keep the panel width constrained so it does not overflow narrow viewports. On smaller screens, consider hiding the NavigationMenu entirely and switching to a Sheet-based mobile menu. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=NavigationMenu. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes