Skip to content

Dropdown Menu

A list of actions that opens from a button.

import { Button, DropdownMenu } from '@brand-studio/ui';

export default function DropdownMenuDemo() {
  return (
    <DropdownMenu
      trigger={<Button tone="secondary">Subscription</Button>}
      items={[
        { label: 'Skip next delivery' },
        { label: 'Change grind' },
        { label: 'Delivery history', href: '#history' },
        'separator',
        { label: 'Pause for a month' },
        { label: 'Cancel subscription', disabled: true },
      ]}
    />
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, DropdownMenu } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { DropdownMenu } from '@brand-studio/ui';

<DropdownMenu
  trigger={<Button tone="secondary">Subscription</Button>}
  items={[
    { label: 'Skip next delivery', onSelect: skip },
    { label: 'Delivery history', href: '/history' },
    'separator',
    { label: 'Pause for a month', onSelect: pause },
  ]}
/>

Accessibility

Enter, Space or the arrow keys open the menu. Arrow keys move, typing a letter jumps to an item, Escape closes it and returns focus to the button.
Items with href render as links; the rest as menu items that call onSelect.
Disabled items stay visible and the keyboard skips them.

API Reference

Prop	Type	Default
`trigger`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	–
`items`	`("separator" \| MenuItem)[]`	–
`align?`	`"center" \| "end" \| "start"`	`'start'`