import { NavigationMenu } from '@base-ui/react/navigation-menu';

<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>
        <NavigationMenu.Icon />
      </NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link />
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>

  <NavigationMenu.Portal>
    <NavigationMenu.Backdrop />
    <NavigationMenu.Positioner>
      <NavigationMenu.Popup>
        <NavigationMenu.Arrow />
        <NavigationMenu.Viewport />
      </NavigationMenu.Popup>
    </NavigationMenu.Positioner>
  </NavigationMenu.Portal>
</NavigationMenu.Root>;

Examples

Nested submenus

<NavigationMenu.Root> component can be nested within a higher-level <NavigationMenu.Content> part to create a multi-level navigation menu.

Custom links

The <NavigationMenu.Link> part can be customized to render the link from your framework using the render prop to enable client-side routing.

Next.js example

import NextLink from 'next/link';
import { NavigationMenu } from '@base-ui/react/navigation-menu';

function Link(props: NavigationMenu.Link.Props) {
  return (
    <NavigationMenu.Link
      render={<NextLink href={props.href} />}
      {...props}
    />
  );
}

Large menus

When you have large menu content that doesn't fit in the viewport in some cases, you usually have two choices:

Compress the navigation menu content

You can change the layout of the navigation menu to render less content or be more compact by reducing the space it takes up. If your content is flexible, you can use the max-height property on .Popup to limit the height of the navigation menu to let it compress itself while preventing overflow.

Compact layout

.Content,
.Popup {
  max-height: var(--available-height);
}

Make the navigation menu scrollable

Scrollable layout

.Content,
.Popup {
  max-height: var(--available-height);
}

.Content {
  overflow-y: auto;
}

Native scrollbars are visible while transitioning content, so we recommend using the Scroll Area component instead of native scrollbars to keep them hidden, which also allows the Arrow to be centered correctly.

API reference

Root

Name	Type	Default	Description
`actionsRef`Optional	`React.RefObject<NavigationMenuRoot.Actions \| null> \| undefined`	—	A ref to imperative actions.
`onOpenChangeComplete`Optional	`((open: boolean) => void) \| undefined`	—	Event handler called after any animations complete when the navigation menu is closed.
`value`Optional	`any`	`null`	The controlled value of the navigation menu item that should be currently open. When non-nullish, the menu will be open. When nullish, the menu will be closed. To render an uncontrolled navigation menu, use the `defaultValue` prop instead.
`defaultValue`Optional	`any`	`null`	The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the `value` prop instead.
`delay`Optional	`number \| undefined`	`50`	How long to wait before opening the navigation menu. Specified in milliseconds.
`closeDelay`Optional	`number \| undefined`	`50`	How long to wait before closing the navigation menu. Specified in milliseconds.
`orientation`Optional	`'horizontal' \| 'vertical' \| undefined`	`horizontal`	The orientation of the navigation menu.

Item

Name	Type	Default	Description
`value`Optional	`any`	—	A unique value that identifies this navigation menu item. If no value is provided, a unique ID will be generated automatically. Use when controlling the navigation menu programmatically.

Content

Name	Type	Default	Description
`keepMounted`Optional	`boolean \| undefined`	`false`	Whether to keep the content mounted in the DOM while the popup is closed. Ensures the content is present during server-side rendering for web crawlers.

Link

Name	Type	Default	Description
`active`Optional	`boolean \| undefined`	`false`	Whether the link is the currently active page.
`closeOnClick`Optional	`boolean \| undefined`	`false`	Whether to close the navigation menu when the link is clicked.

Portal

Name	Type	Default	Description
`keepMounted`Optional	`boolean \| undefined`	`false`	Whether to keep the portal mounted in the DOM while the popup is hidden.
`container`Optional	`FloatingPortal.Props<NavigationMenuPortalState>['container'] \| undefined`	—	A parent element to render the portal element into.

Navigation Menu

Anatomy