DropdownMenu
A menu of actions anchored to a trigger, opened on demand.
Usage
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
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 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>
<DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuItem>Import</DropdownMenuItem>
<DropdownMenuItem>Export</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuSub>API Reference
DropdownMenuContent
DropdownMenu (root) accepts the Base UI Menu root props — open /
defaultOpen, onOpenChange. DropdownMenuItem / DropdownMenuSubTrigger
take an inset flag. See the
Base UI Menu docs for the full prop
surface of each part.