Components

DropdownMenu

A list of actions behind a button, with selection items, groups, submenus and shortcuts.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { DropdownMenu } from '@bigbang/ui';
Source: DropdownMenu.tsx
Storybook: DropdownMenu · Playground

DropdownMenu is in the @bigbang/ui package.

import { DropdownMenu, IconButton } from '@bigbang/ui';

<DropdownMenu align="end" trigger={<IconButton icon="ellipsis" label="More actions" />}>
  <DropdownMenu.Item icon="pencil" shortcut={['mod', 'E']} onSelect={edit}>
    Edit
  </DropdownMenu.Item>
  <DropdownMenu.Separator />
  <DropdownMenu.Item icon="trash" tone="danger" onSelect={confirmDelete}>
    Delete
  </DropdownMenu.Item>
</DropdownMenu>;

Props

triggerRequired

Description: The button that opens the menu, usually a Button or an IconButton such as "Diğer işlemler".
Type: ReactElement

childrenRequired

Description: Items, groups, separators and submenus built from the DropdownMenu.* parts.
Type: ReactNode

side

Description: Side of the trigger where the menu opens; it flips when there is no room.
Type: Side
Default: 'bottom'

align

Description: Alignment along that side.
Type: 'end' | 'start' | 'center'
Default: 'start'

open

Description: Controlled open state. Pass it with onOpenChange.
Type: boolean

defaultOpen

Description: Open state on first render when the menu is uncontrolled.
Type: boolean
Default: false

onOpenChange

Description: Called with the new open state.
Type: (open: boolean) => void

disabled

Description: Stops the trigger from opening the menu.
Type: boolean
Default: false

material

Description: 'solid' keeps the menu and its submenus solid under a glass Provider.
Type: 'auto' | 'solid'
Default: 'auto'

Parts

Part	Props	Note
`DropdownMenu.Item`	`children`, `onSelect`, `icon`, `tone` (`neutral` \| `danger`), `shortcut` (`KbdKey[]`), `description`, `disabled`, `disabledReason`, `closeOnSelect` (default `true`)	`shortcut` is display only; the app binds the keys.
`DropdownMenu.LinkItem`	`children`, `href`, `icon`	Renders an `<a>`.
`DropdownMenu.CheckboxItem`	`children`, `checked`, `defaultChecked`, `onCheckedChange`, `disabled`, `shortcut`	The menu stays open.
`DropdownMenu.RadioGroup`	`label`, `value`, `defaultValue`, `onValueChange`, `children`	The value is a `string`.
`DropdownMenu.RadioItem`	`children`, `value`, `disabled`	The menu stays open.
`DropdownMenu.Group`	`label`, `children`	The label names the group.
`DropdownMenu.Separator`	None
`DropdownMenu.Submenu`	`label`, `icon`, `children`, `disabled`	Opens on hover, on press and with the inward arrow key.

Part types are exported with names such as DropdownMenuItemProps.

Data attributes

data-component="dropdown-menu": on the menu and submenus; submenus also have data-part="submenu".
data-tone="danger": on a danger item. data-part="shortcut": the shortcut.
data-highlighted, data-disabled, data-checked, data-popup-open: from Base UI.