NavigationMenu List data attributes
List renders data attributes: [data-orientation] with values 'vertical' or 'horizontal'.
Radix Primitives · all subjects
navigation-menu
34 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
NavigationMenu accessibility uses navigation role
NavigationMenu adheres to the navigation role requirements from WAI-ARIA. It does not use the WAI-ARIA menu role like menubar does, because menu and menubars behave like native operating system menus with complex focus management and first-character navigation, which are considered unnecessary for website navigation and can confuse users familiar with established website patterns.
NavigationMenu Link usage and aria-current
Use NavigationMenu.Link for all navigational links within a menu, including within any content rendered via NavigationMenu.Content. This ensures consistent keyboard interactions and accessibility. Use the active prop to set aria-current and active styles. This applies both to the main list and to content rendered in Content.
NavigationMenu keyboard interactions
Keyboard interactions: Space/Enter opens content when focus is on Trigger. Tab moves focus to next focusable element. ArrowDown moves focus into Content when horizontal and focus is on open Trigger, or moves focus to next Trigger/Link. ArrowUp moves focus to previous Trigger/Link. ArrowRight/ArrowLeft moves focus into Content when vertical and focus is on open Trigger, or moves focus to next/previous Trigger/Link. Home/End moves focus to first/last Trigger/Link. Esc closes open Content and moves focus to its Trigger.
NavigationMenu controlled and uncontrolled
NavigationMenu can be controlled or uncontrolled. For uncontrolled, use defaultValue prop on Root or Sub. For controlled, use value and onValueChange props together on Root or Sub. Each Item should have a value prop when using controlled mode.
NavigationMenu features overview
NavigationMenu supports: controlled or uncontrolled behavior, flexible layout structure with managed tab focus, submenus, optional active item indicator, full keyboard navigation, CSS variables for advanced animation, and custom timings via delayDuration and skipDelayDuration props.
NavigationMenu Viewport data attributes
Viewport renders data attributes: [data-state] with values 'open' or 'closed', [data-orientation] with values 'vertical' or 'horizontal'.
NavigationMenu Viewport CSS variables
Viewport exposes CSS variables: --radix-navigation-menu-viewport-width (width of viewport when visible/hidden, computed from active content), --radix-navigation-menu-viewport-height (height of viewport when visible/hidden, computed from active content).
NavigationMenu Root and Sub data attributes
Root and Sub render data attributes: [data-orientation] with values 'vertical' or 'horizontal'.
NavigationMenu anatomy and structure
NavigationMenu comprises the following parts: Root (contains all parts), List (contains top level menu items), Item (a top level menu item), Trigger (button that toggles content), Content (contains content associated with each trigger), Link (navigational link), Indicator (optional element that highlights the currently active trigger), Sub (signifies a submenu for nesting), and Viewport (optional element used to render active content outside of the list).
NavigationMenu Root props
Root component props: defaultValue (string, optional, uncontrolled initial active item), value (string, optional, controlled active item), onValueChange ((value: string) => void, optional, event handler for value changes), delayDuration (number, default 200, duration from mouse enter trigger to content opens), skipDelayDuration (number, default 300, time user has to enter another trigger without incurring delay), dir ('ltr' | 'rtl', optional, reading direction, inherits from DirectionProvider or assumes LTR), orientation ('horizontal' | 'vertical', optional, default 'horizontal', menu orientation).
NavigationMenu Sub props
Sub component props: defaultValue (string, optional, uncontrolled initial active item), value (string, optional, controlled active submenu item), onValueChange ((value: string) => void, optional, event handler for value changes), orientation ('horizontal' | 'vertical', optional, default 'horizontal', submenu orientation).
NavigationMenu List props
List component props: asChild (boolean, optional, default false, allows changing the default rendered element for a custom child, merging props and behavior).
NavigationMenu Item props
Item component props: asChild (boolean, optional, default false, allows changing the default rendered element for a custom child), value (string, optional, unique value that associates the item with an active value, managed automatically when uncontrolled).
NavigationMenu Trigger props
Trigger component props: asChild (boolean, optional, default false, allows changing the default rendered element for a custom child).
NavigationMenu Trigger data attributes
Trigger renders data attributes: [data-state] with values 'open' or 'closed', [data-disabled] present when disabled.
NavigationMenu Content props
Content component props: asChild (boolean, optional, default false), onEscapeKeyDown ((event: KeyboardEvent) => void, event handler called when escape key is pressed, preventable with event.preventDefault), onPointerDownOutside ((event: PointerDownOutsideEvent) => void, event handler for pointer events outside component bounds, preventable), onFocusOutside ((event: FocusOutsideEvent) => void, event handler for focus moving outside component bounds, preventable), onInteractOutside ((event: React.FocusEvent | MouseEvent | TouchEvent) => void, event handler for pointer or focus interactions outside component, preventable), forceMount (boolean, used to force mounting for animation library control).
NavigationMenu Content data attributes
Content renders data attributes: [data-state] with values 'open' or 'closed', [data-motion] with values 'to-start', 'to-end', 'from-start', 'from-end', [data-orientation] with values 'vertical' or 'horizontal'.
NavigationMenu Link props
Link component props: asChild (boolean, optional, default false), active (boolean, optional, default false, used to identify link as currently active page), onSelect ((event: Event) => void, event handler called when user selects link via mouse or keyboard, calling event.preventDefault prevents navigation menu from closing).
NavigationMenu Link data attributes
Link renders data attributes: [data-active] present when active.
NavigationMenu Indicator data attributes
Indicator renders data attributes: [data-state] with values 'visible' or 'hidden', [data-orientation] with values 'vertical' or 'horizontal'.
NavigationMenu Indicator CSS variables
Indicator exposes CSS variables: --radix-navigation-menu-indicator-translate-x (horizontal offset of indicator, computed from active trigger's position, present when menu is horizontal), --radix-navigation-menu-indicator-translate-y (vertical offset of indicator, computed from active trigger's position, present when menu is vertical).
NavigationMenu Viewport props
Viewport component props: asChild (boolean, optional, default false), forceMount (boolean, used to force mounting for animation library control).
NavigationMenu vertical orientation example
Create a vertical menu by setting orientation="vertical" on the Root component. Example: <NavigationMenu.Root orientation="vertical"><NavigationMenu.List><NavigationMenu.Item><NavigationMenu.Trigger>Item one</NavigationMenu.Trigger><NavigationMenu.Content>Item one content</NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List></NavigationMenu.Root>
NavigationMenu with Viewport for flexible layouts
Use the Viewport part when you need extra control over where Content is rendered, helpful for adjusted DOM structure or advanced animation. Tab focus is maintained automatically. Example: <NavigationMenu.Root><NavigationMenu.List><NavigationMenu.Item><NavigationMenu.Trigger>Item one</NavigationMenu.Trigger><NavigationMenu.Content>Item one content</NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Viewport /></NavigationMenu.Root>
NavigationMenu Indicator animation example
Use the optional Indicator part to highlight the currently active Trigger. CSS example for horizontal indicator: .NavigationMenuIndicator { background-color: grey; } .NavigationMenuIndicator[data-orientation="horizontal"] { height: 3px; transition: width, transform, 250ms ease; }
NavigationMenu submenus example
Create a submenu by nesting NavigationMenu and using the Sub part in place of Root. Submenus work like Tabs where one item should always be active, so assign and set a defaultValue. Example: <NavigationMenu.Root><NavigationMenu.List><NavigationMenu.Item><NavigationMenu.Trigger>Item two</NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Sub defaultValue="sub1"><NavigationMenu.List><NavigationMenu.Item value="sub1"><NavigationMenu.Trigger>Sub item one</NavigationMenu.Trigger><NavigationMenu.Content>Sub item one content</NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List></NavigationMenu.Sub></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List></NavigationMenu.Root>
NavigationMenu with client-side routing example
When using third-party routing, compose NavigationMenu.Link with a custom component. Example with Next.js: const Link = ({ href, ...props }) => { const pathname = usePathname(); const isActive = href === pathname; return <NavigationMenu.Link asChild active={isActive}><NextLink href={href} className="NavigationMenuLink" {...props} /></NavigationMenu.Link>; }; Then use: <NavigationMenu.Item><Link href="/">Home</Link></NavigationMenu.Item>
NavigationMenu advanced animation with data-motion and viewport variables
Animate Viewport size and Content position using --radix-navigation-menu-viewport-[width|height] CSS variables and data-motion['from-start'|'to-start'|'from-end'|'to-end'] attributes. Combine with position: absolute to create smooth overlapping animation effects. Example: .NavigationMenuContent[data-motion="from-start"] { animation-name: enterFromLeft; } .NavigationMenuViewport { width: var(--radix-navigation-menu-viewport-width); height: var(--radix-navigation-menu-viewport-height); transition: width, height, 250ms ease; }
Navigation Menu do not close with meta key
Do not close Navigation Menu when clicking items and meta key is down.
NavigationMenu.Root delayDuration and skipDelayDuration props
NavigationMenu.Root has delayDuration and skipDelayDuration props. By default, triggers now have a brief delay before opening to improve UX, which can be modified using these props.
NavigationMenu.Link onSelect prop
NavigationMenu.Link has an onSelect prop.
Navigation Menu item indicators CSS custom properties
Added CSS custom properties for Navigation Menu item indicators' translate values.
Navigation Menu disableOutsidePointerEvents removed
Remove unsupported disableOutsidePointerEvents prop from Navigation Menu.