Theme

Customize appearance

AppearanceColorRadiusDensity

Components

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

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs">Overview</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs/installation">Installation</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

NavigationMenu

NavigationMenu properties
Prop	Type	Default	Description
`actionsRef`	React.RefObject<NavigationMenuRootActions \| null> \| undefined React.RefObject<NavigationMenuRootActions \| null> \| undefined	`—`	A ref to imperative actions.
`onOpenChangeComplete`	((open: boolean) => void) \| undefined ((open: boolean) => void) \| undefined	`—`	Event handler called after any animations complete when the navigation menu is closed.
`value`	any 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`	any any	`null`	The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the `value` prop instead.
`onValueChange`	((value: any, eventDetails: NavigationMenuPrimitive.Root.ChangeEventDetails) => void) \| un… ((value: any, eventDetails: NavigationMenuPrimitive.Root.ChangeEventDetails) => void) \| undefined	`—`	Callback fired when the value changes.
`delay`	number \| undefined number \| undefined	`50`	How long to wait before opening the navigation popup. Specified in milliseconds.
`closeDelay`	number \| undefined number \| undefined	`50`	How long to wait before closing the navigation popup. Specified in milliseconds.
`orientation`	"horizontal" \| "vertical" \| undefined "horizontal" \| "vertical" \| undefined	`'horizontal'`	The orientation of the navigation menu.
`ref`	React.Ref<HTMLElement> \| undefined React.Ref<HTMLElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLElement, MouseEvent>>) => void) \| undefined ((event: BaseUIEvent<React.MouseEvent<HTMLElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`className`	string \| ((state: NavigationMenuRootState) => string \| undefined) \| undefined string \| ((state: NavigationMenuRootState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuRootState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	React.CSSProperties \| ((state: NavigationMenuRootState) => React.CSSProperties \| undefined… React.CSSProperties \| ((state: NavigationMenuRootState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.
`align`	Align \| undefined Align \| undefined	`"start"`	How to align the popup relative to the specified side.

NavigationMenuContent

NavigationMenuContent properties
Prop	Type	Default	Description
`keepMounted`	boolean \| undefined 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.
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLDivElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLDivElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLDivElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLDivElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined ((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`className`	string \| ((state: NavigationMenuContentState) => string \| undefined) \| undefined string \| ((state: NavigationMenuContentState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuContentState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	React.CSSProperties \| ((state: NavigationMenuContentState) => React.CSSProperties \| undefi… React.CSSProperties \| ((state: NavigationMenuContentState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.

NavigationMenuIndicator

NavigationMenuIndicator properties
Prop	Type	Default	Description
`className`	string \| ((state: NavigationMenuIconState) => string \| undefined) \| undefined string \| ((state: NavigationMenuIconState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`style`	React.CSSProperties \| ((state: NavigationMenuIconState) => React.CSSProperties \| undefined… React.CSSProperties \| ((state: NavigationMenuIconState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLSpanElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLSpanElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLSpanElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLSpanElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLSpanElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLSpanElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLSpanElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLSpanElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLSpanElement, MouseEvent>>) => void) \| undefined ((event: BaseUIEvent<React.MouseEvent<HTMLSpanElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuIconState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`ref`	React.Ref<HTMLSpanElement> \| undefined React.Ref<HTMLSpanElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

NavigationMenuItem

NavigationMenuItem properties
Prop	Type	Default	Description
`className`	string \| ((state: NavigationMenuItemState) => string \| undefined) \| undefined string \| ((state: NavigationMenuItemState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`style`	React.CSSProperties \| ((state: NavigationMenuItemState) => React.CSSProperties \| undefined… React.CSSProperties \| ((state: NavigationMenuItemState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLLIElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLLIElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLLIElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLLIElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLLIElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLLIElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLLIElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLLIElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLLIElement, MouseEvent>>) => void) \| undefined ((event: BaseUIEvent<React.MouseEvent<HTMLLIElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`value`	any 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.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuItemState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`ref`	React.Ref<HTMLLIElement> \| undefined React.Ref<HTMLLIElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

NavigationMenuLink

NavigationMenuLink properties
Prop	Type	Default	Description
`active`	boolean \| undefined boolean \| undefined	`false`	Whether the link is the currently active page.
`closeOnClick`	boolean \| undefined boolean \| undefined	`false`	Whether to close the navigation menu when the link is clicked.
`ref`	React.Ref<HTMLAnchorElement> \| undefined React.Ref<HTMLAnchorElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLAnchorElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLAnchorElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLAnchorElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLAnchorElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLAnchorElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLAnchorElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLAnchorElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLAnchorElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLAnchorElement, MouseEvent>>) => void) \| undefine… ((event: BaseUIEvent<React.MouseEvent<HTMLAnchorElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`type`	string \| undefined string \| undefined	`—`	The native input or button behavior.
`target`	React.HTMLAttributeAnchorTarget \| undefined React.HTMLAttributeAnchorTarget \| undefined	`—`	Browsing context in which the link opens.
`href`	string \| undefined string \| undefined	`—`	Destination URL for the link.
`className`	string \| ((state: NavigationMenuLinkState) => string \| undefined) \| undefined string \| ((state: NavigationMenuLinkState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuLinkState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	React.CSSProperties \| ((state: NavigationMenuLinkState) => React.CSSProperties \| undefined… React.CSSProperties \| ((state: NavigationMenuLinkState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.

NavigationMenuList

NavigationMenuList properties
Prop	Type	Default	Description
`className`	string \| ((state: NavigationMenuListState) => string \| undefined) \| undefined string \| ((state: NavigationMenuListState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`style`	React.CSSProperties \| ((state: NavigationMenuListState) => React.CSSProperties \| undefined… React.CSSProperties \| ((state: NavigationMenuListState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLUListElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLUListElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLUListElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLUListElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLUListElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLUListElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLUListElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLUListElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLUListElement, MouseEvent>>) => void) \| undefined ((event: BaseUIEvent<React.MouseEvent<HTMLUListElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuListState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`ref`	React.Ref<HTMLUListElement> \| undefined React.Ref<HTMLUListElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

NavigationMenuTrigger

NavigationMenuTrigger properties
Prop	Type	Default	Description
`nativeButton`	boolean \| undefined boolean \| undefined	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`ref`	React.Ref<HTMLButtonElement> \| undefined React.Ref<HTMLButtonElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLButtonElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLButtonElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLButtonElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLButtonElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLButtonElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLButtonElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLButtonElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLButtonElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void) \| undefine… ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`type`	"button" \| "submit" \| "reset" \| undefined "button" \| "submit" \| "reset" \| undefined	`—`	The native input or button behavior.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`className`	string \| ((state: NavigationMenuTriggerState) => string \| undefined) \| undefined string \| ((state: NavigationMenuTriggerState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuTriggerState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	React.CSSProperties \| ((state: NavigationMenuTriggerState) => React.CSSProperties \| undefi… React.CSSProperties \| ((state: NavigationMenuTriggerState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.

NavigationMenuPositioner

NavigationMenuPositioner properties
Prop	Type	Default	Description
`anchor`	Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualEleme… Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null \| undefined	`—`	An element to position the popup against. By default, the popup will be positioned against the trigger.
`positionMethod`	"fixed" \| "absolute" \| undefined "fixed" \| "absolute" \| undefined	`'absolute'`	Determines which CSS `position` property to use.
`side`	Side \| undefined Side \| undefined	`"bottom"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`sideOffset`	number \| OffsetFunction \| undefined number \| OffsetFunction \| undefined	`8`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
`align`	Align \| undefined Align \| undefined	`"start"`	How to align the popup relative to the specified side.
`alignOffset`	number \| OffsetFunction \| undefined number \| OffsetFunction \| undefined	`0`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
`collisionBoundary`	Boundary \| undefined Boundary \| undefined	`'clipping-ancestors'`	An element or a rectangle that delimits the area that the popup is confined to.
`collisionPadding`	Padding \| undefined Padding \| undefined	`5`	Additional space to maintain from the edge of the collision boundary.
`sticky`	boolean \| undefined boolean \| undefined	`false`	Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
`arrowPadding`	number \| undefined number \| undefined	`5`	Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
`disableAnchorTracking`	boolean \| undefined boolean \| undefined	`false`	Whether to disable the popup from tracking any layout shift of its positioning anchor.
`collisionAvoidance`	CollisionAvoidance \| undefined CollisionAvoidance \| undefined	`—`	Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): - `'flip'`: keep the requested side when it fits; otherwise try the opposite side (`top` and `bottom`, or `left` and `right`). - `'shift'`: never change side; keep the requested side and move the popup within the clipping boundary so it stays visible. - `'none'`: do not correct side-axis overflow. `align` controls overflow on the alignment axis (`start`/`center`/`end`): - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows. - `'shift'`: keep side and requested alignment, then nudge the popup along the alignment axis to fit. - `'none'`: do not correct alignment-axis overflow. `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: - `'start'`: allow perpendicular fallback and try the logical start side first (`top` before `bottom`, or `left` before `right` in LTR). - `'end'`: allow perpendicular fallback and try the logical end side first (`bottom` before `top`, or `right` before `left` in LTR). - `'none'`: do not fallback to the perpendicular axis. When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`.
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined	`—`	Called when the control receives focus.
`onBlur`	((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.FocusEvent<HTMLDivElement, Element>>) => void) \| undefined	`—`	Called when the control loses focus.
`onChange`	((event: BaseUIEvent<React.ChangeEvent<HTMLDivElement, Element>>) => void) \| undefined ((event: BaseUIEvent<React.ChangeEvent<HTMLDivElement, Element>>) => void) \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	((event: BaseUIEvent<React.KeyboardEvent<HTMLDivElement>>) => void) \| undefined ((event: BaseUIEvent<React.KeyboardEvent<HTMLDivElement>>) => void) \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined ((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void) \| undefined	`—`	Called when the element is activated.
`className`	string \| ((state: NavigationMenuPositionerState) => string \| undefined) \| undefined string \| ((state: NavigationMenuPositionerState) => string \| undefined) \| undefined	`—`	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn… React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuPositionerState> \| undefined	`—`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	React.CSSProperties \| ((state: NavigationMenuPositionerState) => React.CSSProperties \| und… React.CSSProperties \| ((state: NavigationMenuPositionerState) => React.CSSProperties \| undefined) \| undefined	`—`	Style applied to the element, or a function that returns a style object based on the component's state.

Usage notes

Use links for destinations and triggers for expandable groups. Keep navigation labels concise and descriptive.

Navigation Menu

Preview

Installation

Usage

API reference

Usage notes