NavigationMenu
An unstyled, accessible horizontal menu bar that coordinates multiple Menu instances with keyboard navigation between them.
Compose a horizontal navigation bar from multiple Menu primitives — NavigationMenu tracks which menu is open, switches between them on hover, and routes arrow-key navigation across triggers.
basic-demo
Pre-styled Versions
Choose a pre-styled library to use NavigationMenu with ready-made designs.
For hook-based usage without components, see the Headless API.
Features#
- Coordinates multiple
Menu.Rootchildren, allowing only one menu to be open at a time - Hover-to-switch: hovering another trigger while a menu is open transfers the open state to it
- Arrow-key navigation between sibling triggers
- Horizontal or vertical orientation
- WAI-ARIA
menubarrole with properaria-orientation
Usage#
import { Menu } from 'primereact/menu';
import { NavigationMenu } from 'primereact/navigationmenu';<NavigationMenu>
<Menu.Root>
<Menu.Trigger>File</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup>
<Menu.List>
<Menu.Item>New</Menu.Item>
<Menu.Item>Open</Menu.Item>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger>Edit</Menu.Trigger>
{/* ... */}
</Menu.Root>
</NavigationMenu>API#
NavigationMenu#
| Name | Type | Default |
|---|---|---|
ref | Ref<unknown> | — |
| The reference to the component instance. | ||
pIf | boolean | true |
| Whether the component should be rendered. | ||
style | CSSProperties | ((instance?: NavigationMenuInstance) => CSSProperties) | — |
| The style to apply to the component. | ||
className | string | ((instance?: NavigationMenuInstance) => string) | — |
| The class name to apply to the component. | ||
as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | — |
| The component type to render. | ||
asChild | boolean | false |
| Whether the component should be rendered as a child component. | ||
instance | NavigationMenuInstance | — |
| The instance to pass to the component. | ||
pt | SafeRecord<NavigationMenuPassThrough> | — |
| The pass-through props to pass to the component. | ||
ptOptions | PassThroughOptions | — |
| The pass-through options to pass to the component. | ||
unstyled | boolean | — |
| Whether the component should be rendered without classes. | ||
dt | unknown | — |
| The design token to use for the component. | ||
styles | StylesOptions<ComponentInstance> | — |
| The styles to use for the component. | ||
render | (instance: NavigationMenuInstance) => ReactNode | — |
| The render function to render the component with instance access. | ||
children | any | — |
| The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates. | ||
orientation | NavigationMenuOrientation | 'horizontal' |
| The orientation of the navigationmenu. Determines which arrow keys move between triggers. | ||
loopFocus | boolean | true |
| Whether keyboard focus loops back to the first/last item at the end of the list. | ||
modal | boolean | true |
| Whether the navigationmenu is modal. When true, opening one menu prevents page interaction outside that menu. | ||
disabled | boolean | false |
| Whether all menus in the navigationmenu are disabled. | ||
[key: string] | any | — |
pt-{optionName}-* | - | — |
| Pass through attributes for customizing component. For more info, see Pass Through tab. | ||
| Attribute | Value |
|---|---|
role | "menubar" |
data-scope | "navigationmenu" |
data-part | "root" |
data-orientation | "horizontal" or "vertical" |
data-has-open-menu | Present when any child menu is open |
data-modal | Present when modal mode is enabled |
data-disabled | Present when disabled |
Defines passthrough(pt) options of NavigationMenu component.
| label | type | description |
|---|---|---|
| root | NavigationMenuPassThroughType<HTMLAttributes<HTMLDivElement>> | Used to pass attributes to the root's DOM element. |
Accessibility#
Screen Reader#
NavigationMenu uses the menubar role with aria-orientation reflecting the current orientation. Each child Menu.Trigger is treated as a menuitem within the bar.
Keyboard Support#
| Key | Function |
|---|---|
left arrow / right arrow | Moves focus to the previous / next trigger (horizontal orientation). |
up arrow / down arrow | Moves focus to the previous / next trigger (vertical orientation). |
enter / space | Opens the focused menu. |
home / end | Moves focus to the first / last trigger. |
escape | Closes the open menu and returns focus to its trigger. |