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#

Radio group#

Plain picker#

Headerless picker#

Checkboxes#

Switch#

API#WIP

DropdownMenu#

...props
Base UI Menu.Root.Props
Owns open state, focus, Escape, outside press, and menu dismissal.

DropdownMenuTrigger#

...props
Base UI Menu.Trigger.Props
Button-like trigger. Defaults to an outline md Button; pass render for a custom control.

DropdownMenuContent#

...props
Base UI Popup + Positioner props
Portaled card shell. Defaults to side=bottom, align=start, sideOffset=6, disableAnchorTracking=false, and positionMethod=fixed.

DropdownMenuItem#

...props
Base UI Menu.Item.Props
Source server-switcher row styling with keyboard highlight. Compose special rows with className.

DropdownMenuLabel#

...props
div props
Non-interactive section label composed inside DropdownMenuContent.

DropdownMenuShortcut#

...props
Kbd props
Right-aligned keyboard hint composed inside DropdownMenuItem.

DropdownMenuItemCount#

...props
Badge props
Right-aligned count chip composed from Badge with its default state.

DropdownMenuSeparator#

...props
Base UI Separator.Props
Source server-switcher divider styling as the separator part.

DropdownMenuRadioGroup#

...props
Base UI Menu.RadioGroup.Props
Groups radio items for single-select behavior. Use value/defaultValue/onValueChange.

DropdownMenuRadioItem#

...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#

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

DropdownMenuCheckboxItem#

...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#

...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.

DropdownMenuSubmenu#

...props
Base UI Menu.SubmenuRoot.Props
Nested menu root for secondary action groups.

DropdownMenuSubmenuTrigger#

...props
Base UI Menu.SubmenuTrigger.Props
Item-like trigger that opens a nested DropdownMenuContent.