Component

A site navigation component with dropdown content panels. Supports nested items, links, and accessible keyboard navigation.

View component changelog

Docs under construction

Check back soon.

Import all parts of the component and piece them together

React
import NavigationMenu from "@radui/ui/NavigationMenu"

export default () => {
    return (
        <NavigationMenu.Root>
            <NavigationMenu.Item value="example">
                <NavigationMenu.Trigger />
                <NavigationMenu.Content>
                    <NavigationMenu.Link href="#" />
                </NavigationMenu.Content>
            </NavigationMenu.Item>
        </NavigationMenu.Root>
    )
}

The root NavigationMenu component.

PropTypeDefault
value
string
--
loop
boolean
true
contentLoop
boolean
true
aria-label
string
--
onValueChange
function
--
ShortcutDescription
Enter

When focus is on a NavigationMenu.Trigger, toggles its content panel.

Space

When focus is on a NavigationMenu.Trigger, toggles its content panel.

ArrowRight

Moves focus to the next trigger or link, wrapping to the first when loop is enabled.

ArrowLeft

Moves focus to the previous trigger or link, wrapping to the last when loop is enabled.

ArrowDown

On a NavigationMenu.Trigger, opens its panel (if closed) and moves focus to the first link. Inside an open panel, moves focus to the next link.

ArrowUp

Inside an open content panel, moves focus to the previous link.

Home

Moves focus to the first trigger or link in the current group.

End

Moves focus to the last trigger or link in the current group.

Escape

Closes the open content panel and returns focus to its NavigationMenu.Trigger. Pressing outside the item also closes it.

Tab

Moves focus out of the current group to the next focusable element.

ReferenceWhat Rad UI follows
Disclosure pattern

Root renders a <nav> landmark (name it with aria-label). Triggers are buttons that expose aria-expanded and aria-controls for their content panel; links inside panels keep native link semantics.

Edit this page on GitHub →