DropdownMenu

A trigger-driven menu family built on Base UI Menu for account, action, and nested command surfaces.

Preview#

Preview models a profile menu. Icons, trailing chevrons, shortcuts, counters, and selected state indicators are composed as children so product code can choose its own visual language without a dedicated icon prop.

Anatomy#

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSubmenu,
  DropdownMenuSubmenuTrigger,
  DropdownMenuTrigger,
} from "raft-ui";

<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    <DropdownMenuLabel />
    <DropdownMenuItem>
      <DropdownMenuShortcut />
    </DropdownMenuItem>
    <DropdownMenuSubmenu>
      <DropdownMenuSubmenuTrigger />
      <DropdownMenuContent>
        <DropdownMenuItem />
      </DropdownMenuContent>
    </DropdownMenuSubmenu>
    <DropdownMenuSeparator />
  </DropdownMenuContent>
</DropdownMenu>

Usage#

Submenu#

Radio group#

Plain picker#

Headerless picker#

Checkboxes#

Switch#

API#WIP

Prop	Type	Default	Description
`...props`	Base UI Menu.Root.Props	—	Owns open state, focus, Escape, outside press, and menu dismissal.

Prop	Type	Default	Description
`...props`	Base UI Menu.Trigger.Props	—	Button-like trigger. Defaults to an outline md Button; pass render for a custom control.

DropdownMenuContent#

Prop	Type	Default	Description
`...props`	Base UI Popup + Positioner props	—	Portaled card shell. Defaults to side=bottom, align=start, sideOffset=6 elegant / 4 brutal, disableAnchorTracking=false, and positionMethod=fixed.

Prop	Type	Default	Description
`...props`	Base UI Menu.Item.Props	—	Source server-switcher row styling with keyboard highlight. Compose special rows with className.

Prop	Type	Default	Description
`...props`	div props	—	Non-interactive section label composed inside DropdownMenuContent.

Prop	Type	Default	Description
`...props`	Kbd props	—	Right-aligned keyboard hint composed inside DropdownMenuItem.

Prop	Type	Default	Description
`...props`	Badge props	—	Right-aligned count chip composed from Badge with its default state.

Prop	Type	Default	Description
`...props`	Base UI Separator.Props	—	Source server-switcher divider styling as the separator part.

Prop	Type	Default	Description
`...props`	Base UI Menu.RadioGroup.Props	—	Groups radio items for single-select behavior. Use value/defaultValue/onValueChange.

DropdownMenuRadioItem#

Prop	Type	Default	Description
`...props`	Base UI Menu.RadioItem.Props	—	Single-select item inside RadioGroup. Uses same item styling as DropdownMenuItem with built-in check indicator. closeOnClick defaults to false.

DropdownMenuRadioItemIndicator#

Prop	Type	Default	Description
`...props`	Base UI Menu.RadioItemIndicator.Props	—	Lower-level indicator for custom composition. Renders children only when the parent radio item is selected.

DropdownMenuCheckboxItem#

Prop	Type	Default	Description
`...props`	Base UI Menu.CheckboxItem.Props	—	Independent toggle item. Uses same item styling as DropdownMenuItem with built-in check indicator. closeOnClick defaults to false.

DropdownMenuCheckboxItemIndicator#

Prop	Type	Default	Description
`...props`	Base UI Menu.CheckboxItemIndicator.Props	—	Lower-level indicator for custom composition (e.g. switch visuals). Renders children only when the parent checkbox item is checked. Use keepMounted to preserve layout when unchecked.