DropdownMenu

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Items can take an icon, a shortcut and a tone. Shortcuts are shown with Kbd and exposed with aria-keyshortcuts. A disabled item gives its reason on a second line. The danger item sits last, after a separator.

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>
  );
}

On an icon button

A row-end “More actions” menu aligns to the end. description adds a second line.

LightDark

Copy code

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

export default function OnIconButton() {
  return (
    <DropdownMenu align="end" trigger={<IconButton icon="ellipsis" label="More actions" variant="secondary" />}>
      <DropdownMenu.Item icon="pencil">Edit</DropdownMenu.Item>
      <DropdownMenu.Item icon="copy" description="Creates a copy of the item.">
        Duplicate
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}

Checkbox and radio items

Selection items keep the menu open; the check mark and the dot grow in at the end of the label. Use inset to line up an item without an icon with items that have one. Group labels name their groups.

View

LightDark

Copy code

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

export default function Selection() {
  const [sort, setSort] = useState('name');
  return (
    <DropdownMenu trigger={<Button variant="secondary">View</Button>}>
      <DropdownMenu.Group label="Columns">
        <DropdownMenu.CheckboxItem defaultChecked>First item</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem>Second item</DropdownMenu.CheckboxItem>
      </DropdownMenu.Group>
      <DropdownMenu.Separator />
      <DropdownMenu.RadioGroup label="Sort" value={sort} onValueChange={setSort}>
        <DropdownMenu.RadioItem value="name">By name</DropdownMenu.RadioItem>
        <DropdownMenu.RadioItem value="date">By date</DropdownMenu.RadioItem>
      </DropdownMenu.RadioGroup>
    </DropdownMenu>
  );
}

Submenu

A submenu opens towards the inline end; it opens on hover, on press or with the inward arrow key, and closes with the outward one.

Actions

LightDark

Copy code

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

export default function Submenu() {
  return (
    <DropdownMenu trigger={<Button variant="secondary">Actions</Button>}>
      <DropdownMenu.Item icon="pencil">Edit</DropdownMenu.Item>
      <DropdownMenu.Submenu label="Share" icon="external-link">
        <DropdownMenu.Item icon="mail">By email</DropdownMenu.Item>
        <DropdownMenu.Item icon="copy">Copy link</DropdownMenu.Item>
      </DropdownMenu.Submenu>
    </DropdownMenu>
  );
}

Light and dark mode

The menu uses color-surface-raised; the highlighted item uses color-action-subtle-hovered.

Light

Actions

Dark

Actions

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>
  );
}