A collection of links for navigating websites.
import React from 'react';import * as NavigationMenu from '@radix-ui/react-navigation-menu';import classNames from 'classnames';import { CaretDownIcon } from '@radix-ui/react-icons';import './styles.css';const NavigationMenuDemo = () => {return (<NavigationMenu.Root className="NavigationMenuRoot"><NavigationMenu.List className="NavigationMenuList"><NavigationMenu.Item><NavigationMenu.Trigger className="NavigationMenuTrigger">Learn <CaretDownIcon className="CaretDown" aria-hidden /></NavigationMenu.Trigger><NavigationMenu.Content className="NavigationMenuContent"><ul className="List one"><li style={{ gridRow: 'span 3' }}><NavigationMenu.Link asChild><a className="Callout" href="/"><svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white"><path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"></path><path d="M12 0H4V8H12V0Z"></path><path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"></path></svg><div className="CalloutHeading">Radix Primitives</div><p className="CalloutText">Unstyled, accessible components for React.</p></a></NavigationMenu.Link></li><ListItem href="https://stitches.dev/" title="Stitches">CSS-in-JS with best-in-class developer experience.</ListItem><ListItem href="/colors" title="Colors">Beautiful, thought-out palettes with auto dark mode.</ListItem><ListItem href="https://icons.radix-ui.com/" title="Icons">A crisp set of 15x15 icons, balanced and consistent.</ListItem></ul></NavigationMenu.Content></NavigationMenu.Item><NavigationMenu.Item><NavigationMenu.Trigger className="NavigationMenuTrigger">Overview <CaretDownIcon className="CaretDown" aria-hidden /></NavigationMenu.Trigger><NavigationMenu.Content className="NavigationMenuContent"><ul className="List two"><ListItem title="Introduction" href="/primitives/docs/overview/introduction">Build high-quality, accessible design systems and web apps.</ListItem><ListItem title="Getting started" href="/primitives/docs/overview/getting-started">A quick tutorial to get you up and running with Radix Primitives.</ListItem><ListItem title="Styling" href="/primitives/docs/guides/styling">Unstyled and compatible with any styling solution.</ListItem><ListItem title="Animation" href="/primitives/docs/guides/animation">Use CSS keyframes or any animation library of your choice.</ListItem><ListItem title="Accessibility" href="/primitives/docs/overview/accessibility">Tested in a range of browsers and assistive technologies.</ListItem><ListItem title="Releases" href="/primitives/docs/overview/releases">Radix Primitives releases and their changelogs.</ListItem></ul></NavigationMenu.Content></NavigationMenu.Item><NavigationMenu.Item><NavigationMenu.Link className="NavigationMenuLink" href="https://github.com/radix-ui">Github</NavigationMenu.Link></NavigationMenu.Item><NavigationMenu.Indicator className="NavigationMenuIndicator"><div className="Arrow" /></NavigationMenu.Indicator></NavigationMenu.List><div className="ViewportPosition"><NavigationMenu.Viewport className="NavigationMenuViewport" /></div></NavigationMenu.Root>);};const ListItem = React.forwardRef(({ className, children, title, ...props }, forwardedRef) => (<li><NavigationMenu.Link asChild><a className={classNames('ListItemLink', className)} {...props} ref={forwardedRef}><div className="ListItemHeading">{title}</div><p className="ListItemText">{children}</p></a></NavigationMenu.Link></li>));export default NavigationMenuDemo;
Can be controlled or uncontrolled.
Flexible layout structure with managed tab focus.
Supports submenus.
Optional active item indicator.
Full keyboard navigation.
Exposes CSS variables for advanced animation.
Supports custom timings.
Install the component from your command line.
Import all parts and piece them together.
Contains all the parts of a navigation menu.
Signifies a submenu. Use it in place of the root part when nested to create a submenu.
Contains the top level menu items.
A top level menu item, contains a link or trigger with content combination.
The button that toggles the content.
Contains the content associated with each trigger.
A navigational link.
An optional indicator element that renders below the list, is used to highlight the currently active trigger.
An optional viewport element that is used to render active content outside of the list.
You can create a vertical menu by using the orientation
prop.
Use the Viewport
part when you need extra control over where Content
is rendered. This can be helpful when your design
requires an adjusted DOM structure or if you need flexibility to achieve advanced animation.
Tab focus will be maintained automatically.
You can use the optional Indicator
part to highlight the currently active Trigger
, this is useful when you want to provide
an animated visual cue such as an arrow or highlight to accompany the Viewport
.
Create a submenu by nesting your NavigationMenu
and using the Sub
part in place of its Root
.
Submenus work differently to Root
navigation menus and are similar to Tabs
in that one item should always be active, so be
sure to assign and set a defaultValue
.
If you need to use the Link
component provided by your routing package then we recommend composing with NavigationMenu.Link
via a custom component.
This will ensure accessibility and consistent keyboard control is maintained. Here's an example using Next.js:
We expose --radix-navigation-menu-viewport-[width|height]
and data-motion['from-start'|'to-start'|'from-end'|'to-end']
attributes
to allow you to animate Viewport
size and Content
position based on the enter/exit direction.
Combining these with position: absolute;
allows you to create smooth overlapping animation effects when moving between items.
Adheres to the navigation
role requirements.
NavigationMenu
should not be confused with menubar
, although this primitive shares the name menu
in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu
role.
This is because menu
and menubars
behave like native operating system menus most commonly found in desktop application windows, as such they feature complex functionality like composite focus management and first-character navigation.
These features are often considered unnecessary for website navigation and at worst can confuse users who are familiar with established website patterns.
See the W3C Disclosure Navigation Menu example for more information.
It's important to use NavigationMenu.Link
for all navigational links within a menu, this not only applies to the main list
but also within any content rendered via NavigationMenu.Content
. This will ensure consistent keyboard interactions and accessibility
while also giving access to the active
prop for setting aria-current
and the active styles.
See this example for more information on usage with third party routing components.