DropdownMenu
A menu of actions anchored to a trigger, opened on demand.
Usage
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
DropdownMenuPortal,
ButtonMenu,
} from '@acronis-platform/ui-react';DropdownMenu is a compound component built on Base UI's Menu primitive
(positioning, roving focus, typeahead, outside-press / Esc dismissal, ARIA).
Themed by the --ui-button-menu-dropdown-* token tier from
@acronis-platform/tokens-pd. DropdownMenu owns the open state;
DropdownMenuTrigger opens it (typically composed with a ButtonMenu); and
DropdownMenuContent is the portaled popup holding DropdownMenuGroups of
DropdownMenuItems — with optional labels, separators, checkbox/radio items,
shortcuts, and nested submenus.
Examples
A basic actions menu with a ButtonMenu trigger:
<DropdownMenu>
<DropdownMenuTrigger render={<ButtonMenu variant="secondary">Actions</ButtonMenu>} />
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>
Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>Multiple DropdownMenuGroups render an automatic top-border separator between
sections (non-first groups get the border).
A nested submenu. DropdownMenuSub sits inside a DropdownMenuGroup,
alongside the other items — the group supplies the row padding and gap, so a
sub-trigger placed directly in DropdownMenuContent would not line up with its
siblings:
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuItem>Import</DropdownMenuItem>
<DropdownMenuItem>Export</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuGroup>
</DropdownMenuContent>DropdownMenuSubTrigger renders a trailing cascade chevron (mirrored under
dir="rtl") and opens the submenu on hover or ArrowRight.
DropdownMenuLabel and DropdownMenuSeparator annotate sections within a group.
Checkbox and radio items let the consumer own the state. A checkbox/radio item
reserves a leading indicator slot, so give a label sitting above one inset to
line its text up with the item labels:
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel inset>View options</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
Show grid
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showRuler} onCheckedChange={setShowRuler}>
Show ruler
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuContent>DropdownMenuRadioGroup / DropdownMenuRadioItem follow the same owned-state
pattern — the consumer supplies value / onValueChange:
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel inset>Panel position</DropdownMenuLabel>
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>API Reference
DropdownMenuContent
DropdownMenu (root) accepts the Base UI Menu root props — open /
defaultOpen, onOpenChange. DropdownMenuItem / DropdownMenuLabel /
DropdownMenuSubTrigger take an inset flag. DropdownMenuCheckboxItem takes
checked / onCheckedChange; DropdownMenuRadioGroup takes value /
onValueChange. Items also accept Base UI's closeOnClick — pass
closeOnClick={false} to keep the menu open while the user toggles several rows
(this is how TableViewOptions builds its column-visibility panel). See the
Base UI Menu docs for the full prop
surface of each part.