Component

Menubar

Name: Rad UI
Author: Rad UI Team

An application-style horizontal menu bar. Each menu has a trigger that opens a dropdown with items, sub-menus, and separators.

preview

React
"use client"

import Menubar from "@radui/ui/Menubar"

const MenubarExample = () => {
    return (
        <Menubar.Root>
            <Menubar.Menu>
                <Menubar.Trigger>File</Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content>
                        <Menubar.Item label="New File">New File</Menubar.Item>
                        <Menubar.Item label="Open">Open...</Menubar.Item>
                        <Menubar.Separator />
                        <Menubar.Item label="Save">Save</Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>
            <Menubar.Menu>
                <Menubar.Trigger>Edit</Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content>
                        <Menubar.Item label="Undo">Undo</Menubar.Item>
                        <Menubar.Item label="Redo">Redo</Menubar.Item>
                        <Menubar.Separator />
                        <Menubar.Item label="Cut">Cut</Menubar.Item>
                        <Menubar.Item label="Copy">Copy</Menubar.Item>
                        <Menubar.Item label="Paste">Paste</Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>
            <Menubar.Menu>
                <Menubar.Trigger>View</Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content>
                        <Menubar.Item label="Zoom In">Zoom In</Menubar.Item>
                        <Menubar.Item label="Zoom Out">Zoom Out</Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>
        </Menubar.Root>
    )
}

export default MenubarExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <Menubar.Root>
            <Menubar.Menu>
                <Menubar.Trigger>File</Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content>
                        <Menubar.Item>New</Menubar.Item>
                        <Menubar.Separator />
                        <Menubar.Sub>
                            <Menubar.SubTrigger>Share</Menubar.SubTrigger>
                        </Menubar.Sub>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>
        </Menubar.Root>
    )
}

Root

The root Menubar container.

Prop	Type	Default
value	string	--
onValueChange	function	--
className	string	""

Keyboard Interactions

Shortcut	Description
`ArrowRight`	Moves focus to the next top-level menu trigger. If a menu is open, the next menu opens.
`ArrowLeft`	Moves focus to the previous top-level menu trigger. If a menu is open, the previous menu opens.
`Home`	Moves focus to the first top-level menu trigger.
`End`	Moves focus to the last top-level menu trigger.
`Enter`	Opens or closes the focused menu.
`Space`	Opens or closes the focused menu.
`ArrowDown`	Opens the focused menu and moves focus into its items.
`Escape`	Closes the open menu and restores focus to its top-level trigger.

ARIA References

Reference	What Rad UI follows
Menubar pattern	The root uses role="menubar" with horizontal orientation. Triggers are menuitems with aria-haspopup="menu" and aria-expanded, and only the active trigger is in the tab order.
Menu pattern	Uses menu semantics inside each opened menu for item navigation, submenu entry, and activation.