Component

DropdownMenu

A button-triggered dropdown menu with full keyboard navigation. Supports sub-menus, separators, and portal rendering.

preview

React
"use client"

import DropdownMenu from "@radui/ui/DropdownMenu"

const HamburgerIcon = () => (
    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
    </svg>
)

const DropdownMenuExample = () => {
    return (
        <DropdownMenu.Root>
            <DropdownMenu.Trigger aria-label="Open menu"><HamburgerIcon /></DropdownMenu.Trigger>
            <DropdownMenu.Portal>
                <DropdownMenu.Content>
                    <DropdownMenu.Item label="Profile">Profile</DropdownMenu.Item>
                    <DropdownMenu.Item label="Settings">Settings</DropdownMenu.Item>
                    <DropdownMenu.Item label="Notifications">Notifications</DropdownMenu.Item>
                    <DropdownMenu.Separator />
                    <DropdownMenu.Item label="Logout">Logout</DropdownMenu.Item>
                </DropdownMenu.Content>
            </DropdownMenu.Portal>
        </DropdownMenu.Root>
    )
}

export default DropdownMenuExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <DropdownMenu.Root>
            <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
            <DropdownMenu.Portal>
                <DropdownMenu.Content>
                    <DropdownMenu.Item>Item</DropdownMenu.Item>
                    <DropdownMenu.Separator />
                    <DropdownMenu.Sub>
                        <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
                    </DropdownMenu.Sub>
                </DropdownMenu.Content>
            </DropdownMenu.Portal>
        </DropdownMenu.Root>
    )
}

Root

The root DropdownMenu component.

Prop	Type	Default
open	boolean	--
defaultOpen	boolean	false
modal	boolean	true
onOpenChange	function	--

Item

A single menu item.

Prop	Type	Default
disabled	boolean	false
onSelect	function	--
className	string	""

Keyboard Interactions

Shortcut	Description
`Enter`	Opens the menu from the trigger, or activates the focused menu item.
`Space`	Opens the menu from the trigger, or activates the focused menu item.
`ArrowDown`	Opens the menu and moves focus to the first item, or advances to the next item.
`ArrowUp`	Moves focus to the previous item while the menu is open.
`Escape`	Closes the menu and returns focus to the trigger.

ARIA References

Reference	What Rad UI follows
Menu button pattern	Follows menu button guidance for a button-triggered menu, popup state, keyboard opening, item navigation, and dismissal.