DropdownMenu

When to use

DropdownMenu gathers several actions for an item or a page behind one button: a row-end “More actions”, export options, view settings.

When not to use

• To pick a form value: Use Select.
• For two or three frequent actions: Show the buttons directly.
• For navigation: Use the app shell navigation component.
• For interactive content: Use Popover.

Anatomy

Actions

LightDark

Copy code

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

export default function Default() {
  return (
    <DropdownMenu trigger={<Button variant="secondary">Actions</Button>}>
      <DropdownMenu.Item icon="pencil" shortcut={['mod', 'E']}>
        Edit
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="copy" shortcut={['mod', 'D']}>
        Duplicate
      </DropdownMenu.Item>
      <DropdownMenu.Item icon="download" disabled disabledReason="Export is turned off for this item.">
        Export
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item icon="trash" tone="danger">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}

1. Trigger: A Button or an IconButton.
2. Menu: Raised surface, thin ring, small shadow.
3. Item: Icon, label, optional second line and shortcut.
4. Separator.
5. Danger item: Red text and icon.

Behaviour

• Opens on trigger press, Enter, Space or Down arrow, and highlights the first item.
• Arrow keys move between items and wrap at the ends; Home and End jump to the ends; typing a letter jumps to an item starting with it.
• Choosing an item runs its action, closes the menu and returns focus to the trigger.
• Checkbox and radio items keep the menu open.
• Disabled items can be highlighted with the arrow keys; their reasons are read.
• The menu flips when there is no room; a long menu scrolls on its own.

Guidelines

• Start item labels with a verb.
• Put the danger item last, after a separator, and confirm it with an AlertDialog.
• Explain a disabled item instead of hiding it; do not show it at all to people without the permission.
• Keep submenus to one level.
• Show a shortcut only when the app really binds it.

Content

Turkish	English
Diğer işlemler	More actions
Düzenle	Edit
Çoğalt	Duplicate
Sil	Delete

Glass

Under a Provider material="glass", the menu and its submenus turn glass; the highlighted row keeps a translucent selected fill. material="solid" keeps it solid.

Related components

• Kbd: Shortcut keys.
• IconButton: The “More actions” trigger.
• AlertDialog: To confirm a danger item.
• Popover: For interactive content.