NavigationMenu · ui.voila.dev

<NavigationMenu.Root>
	<NavigationMenu.List>
		<NavigationMenu.Item>
			<NavigationMenu.Trigger>Projects</NavigationMenu.Trigger>
			<NavigationMenu.Content>
				<ul className="grid w-64 gap-1">
					<li><NavigationMenu.Link href="/projects">Open projects</NavigationMenu.Link></li>
				</ul>
			</NavigationMenu.Content>
		</NavigationMenu.Item>
	</NavigationMenu.List>
</NavigationMenu.Root>

This is for navigation; DropdownMenu is for actions. The difference is real to a screen reader, which announces one as a list of links and the other as a menu of commands.

A top-level item that goes straight somewhere needs no trigger — use a NavigationMenu.Link with navigationMenuTriggerStyle().

API

NavigationMenu.Root

Prop	Type	Default
`actionsRef`	`RefObject<NavigationMenuRootActions \| null>`	—	A ref to imperative actions.
`align`	`Align`	`"start"`	How to align the popup relative to the specified side.
`alignOffset`	`number \| OffsetFunction`	`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:
`className`	`string` \| `((state: NavigationMenuRootState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`closeDelay`	`number`	—	How long to wait before closing the navigation popup. Specified in milliseconds.
`collisionPadding`	`Padding`	—	Additional space to maintain from the edge of the collision boundary.
`defaultValue`	`any`	—	The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the `value` prop instead.
`delay`	`number`	—	How long to wait before opening the navigation popup. Specified in milliseconds.
`onOpenChangeComplete`	`((open: boolean) => void)`	—	Event handler called after any animations complete when the navigation menu is closed.
`onValueChange`	`((value: any, eventDetails: NavigationMenuRootChangeEventDetails) => void)`	—	Callback fired when the value changes.
`orientation`	`"horizontal" \| "vertical"`	—	The orientation of the navigation menu.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuRootState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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.
`side`	`Side`	`"bottom"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`sideOffset`	`number \| OffsetFunction`	`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:
`style`	`CSSProperties` \| `((state: NavigationMenuRootState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`value`	`any`	—	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.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-root.tsx.

NavigationMenu.Content

Prop	Type	Default
`className`	`string` \| `((state: NavigationMenuContentState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`keepMounted`	`boolean`	—	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.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuContentState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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`	`CSSProperties` \| `((state: NavigationMenuContentState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-content.tsx.

NavigationMenu.Indicator

Prop	Type	Default
`className`	`string` \| `((state: NavigationMenuIconState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuIconState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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`	`CSSProperties` \| `((state: NavigationMenuIconState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-indicator.tsx.

NavigationMenu.Item

Prop	Type	Default
`className`	`string` \| `((state: NavigationMenuItemState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuItemState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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`	`CSSProperties` \| `((state: NavigationMenuItemState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`value`	`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.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-item.tsx.

NavigationMenu.Link

Prop	Type	Default
`active`	`boolean`	—	Whether the link is the currently active page.
`className`	`string` \| `((state: NavigationMenuLinkState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`closeOnClick`	`boolean`	—	Whether to close the navigation menu when the link is clicked.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuLinkState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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`	`CSSProperties` \| `((state: NavigationMenuLinkState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-link.tsx.

NavigationMenu.List

Prop	Type	Default
`className`	`string` \| `((state: NavigationMenuListState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuListState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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`	`CSSProperties` \| `((state: NavigationMenuListState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-list.tsx.

NavigationMenu.Positioner

Prop	Type	Default
`align`	`Align`	`"start"`	How to align the popup relative to the specified side.
`alignOffset`	`number \| OffsetFunction`	`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:
`anchor`	`Element` \| `RefObject<Element \| null>` \| `VirtualElement` \| `(() => Element` \| `VirtualElement` \| `null) \| null`	—	An element to position the popup against. By default, the popup will be positioned against the trigger.
`arrowPadding`	`number`	—	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.
`className`	`string` \| `((state: NavigationMenuPositionerState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`collisionAvoidance`	`CollisionAvoidance`	—	Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): `align` controls overflow on the alignment axis (`start`/`center`/`end`): `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`.
`collisionBoundary`	`Boundary`	—	An element or a rectangle that delimits the area that the popup is confined to.
`collisionPadding`	`Padding`	—	Additional space to maintain from the edge of the collision boundary.
`disableAnchorTracking`	`boolean`	—	Whether to disable the popup from tracking any layout shift of its positioning anchor.
`positionMethod`	`"absolute" \| "fixed"`	—	Determines which CSS `position` property to use.
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuPositionerState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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.
`side`	`Side`	`"bottom"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`sideOffset`	`number \| OffsetFunction`	`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:
`sticky`	`boolean`	—	Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
`style`	`CSSProperties` \| `((state: NavigationMenuPositionerState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-positioner.tsx.

NavigationMenu.Trigger

Prop	Type	Default
`className`	`string` \| `((state: NavigationMenuTriggerState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`nativeButton`	`boolean`	—	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>`).
`render`	`ComponentRenderFn<HTMLProps, NavigationMenuTriggerState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	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`	`CSSProperties` \| `((state: NavigationMenuTriggerState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: navigation-menu/components/navigation-menu-trigger.tsx.