Stable in React

NavigationMenu.RootGroups all parts of the navigation menu.
NavigationMenu.ListContains a list of navigation menu items.
NavigationMenu.ItemAn individual navigation menu item.
NavigationMenu.TriggerOpens the navigation menu popup when hovered or clicked, revealing the associated content.
NavigationMenu.IconAn icon that indicates that the trigger button opens a menu.
NavigationMenu.ContentA container for the content of the navigation menu item that is moved into the popup when the item is active.
NavigationMenu.LinkA link in the navigation menu that can be used to navigate to a different page or section.
NavigationMenu.PortalA portal element that moves the popup to a different part of the DOM.
NavigationMenu.PositionerPositions the navigation menu against the currently active trigger.
NavigationMenu.PopupA container for the navigation menu contents.
NavigationMenu.ArrowDisplays an element pointing toward the navigation menu's current anchor.
NavigationMenu.ViewportThe clipping viewport of the navigation menu's current content.
NavigationMenu.BackdropA backdrop for the navigation menu popup. Not in the example.

Examples#

Common ways to put it to work. Each one runs live.

A Root inside a Content part makes a second level that opens to the side.

NavigationMenuNested.tsx

Styling and accessibility#

The parts ship no styles. Style their states with these attributes; the CSS tab at the top has a sheet. The same CSS works in all five frameworks.

[data-popup-open]Present when the corresponding navigation menu is open. On Trigger, Icon.
[data-pressed]Present when the trigger is pressed. On Trigger.
[data-disabled]Present when the trigger is disabled. On Trigger.
[data-open]Present when the popup is open. On Content, Positioner, Popup, Arrow, Backdrop.
[data-closed]Present when the popup is closed. On Content, Positioner, Popup, Arrow, Backdrop.
[data-starting-style]Present when the content begins animating in. On Content, Popup, Backdrop.
[data-ending-style]Present when the content is animating out. On Content, Popup, Backdrop.
[data-activation-direction]Which direction another trigger was activated from. On Content.
[data-active]Present when the link is the currently active page. On Link.
[data-anchor-hidden]Present when the anchor is hidden. On Positioner, Popup.
[data-side]Indicates which side the popup is positioned relative to the trigger. On Positioner, Popup, Arrow.
[data-align]Indicates how the popup is aligned relative to the specified side. On Positioner, Popup, Arrow.
[data-instant]Present if animations should be instant. On Positioner.
--available-widthThe available width between the trigger and the edge of the viewport. On Positioner.
--available-heightThe available height between the trigger and the edge of the viewport. On Positioner.
--anchor-widthThe anchor's width. On Positioner.
--anchor-heightThe anchor's height. On Positioner.
--transform-originThe coordinates that this element is anchored to. Used for animations and transitions. On Positioner.
--positioner-widthThe fixed width of the positioner element. On Positioner.
--positioner-heightThe fixed height of the positioner element. On Positioner.
--popup-widthThe fixed width of the popup element. On Popup.
--popup-heightThe fixed height of the popup element. On Popup.
[data-uncentered]Present when the popup arrow is uncentered. On Arrow.

Keyboard

ArrowDownEnterSpaceOpens the item's content and keeps focus on the trigger On Trigger.
ArrowLeftArrowRightMoves between the triggers and links of the list On List.
ArrowDownArrowUpMoves between the triggers of a nested menu On List.
EscapeCloses the content and returns focus to its trigger On Trigger.

Set for you

renders a <nav>the menu is a navigation landmarkRoot
renders a <ul>, each Item an <li>a screen reader counts the entriesList
aria-expanded, aria-controls to the popup while its content is opena screen reader says whether the panel is open and where it isTrigger
aria-current="page" while activethe link to the current page is announced as suchLink
aria-hidden="true"the decorative chevron is not readIcon
aria-hidden="true"the decorative arrow is not readArrow
role="presentation"the overlay is not readBackdrop

API reference#

28 props across 13 parts, in React syntax, and className, style, render once for every part. Open a row to try it.

Filter props

NavigationMenu · all parts

Shared propsEvery part that renders an element takes these.

classNameCSS class applied to the element, or a function that returns a class based on the component's state.string | ((state: State) => string | undefined)

styleStyle applied to the element, or a function that returns a style object based on the component's state.React.CSSProperties | ((state: State) => React.CSSProperties | undefined)

renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, State>

Use it in React#

What differs from the React API. Switch the framework at the top of the page.

@▢▢▢▢/react is the React 19 package. Its parts, props, data attributes and error messages are upstream Base UI's, and upstream's own tests run against it.

Parts
Each component is its own entry point and exports one namespace named after it.
```
import { Switch } from '@base-ui-next/react/switch'

export function Example() {
  return (
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
  )
}
```
A part renders the element its API reference names, such as a <span> for Switch.Root.
Props and events
Props and callbacks have upstream's names and signatures: onCheckedChange(checked, details), onOpenChange(open, details), onValueChange(value, details). details carries reason, event, cancel() and allowPropagation(). Native handlers are React's (onClick, onKeyDown), and event.preventBaseUIHandler() stops a part's own handler.
Styling
className takes a string or a function (state) => string; style takes an object or a function (state) => object. The state's data-* attributes are on the element for CSS.
render
render takes an element (render={<a href="/docs" />}) or a function (props, state) => element that spreads props on what it returns.
Refs
ref reaches the part's element. Imperative handles are ref props, as upstream: inputRef, and actionsRef ({ validate } on Field and Form, { unmount, close } on Dialog).
Binding
A part is controlled when its value prop (checked, open, value) is set, and uncontrolled with the default form (defaultChecked, defaultOpen, defaultValue). React has no two-way binding: pair the value with its change callback.
From @base-ui/react
Change the import from @base-ui/react/<component> to @▢▢▢▢/react/<component>.
From @base-ui/react
Nothing else changes: props, parts, data attributes and errors are the same.

Navigation Menu

Install#