DropdownMenu

Stable

A menu of actions or options opened from a button, with groups, checkable items and submenus.

Use DropdownMenu for a set of actions that apply to the current context, such as everything you can do with a signature template. For choosing a value in a form, use Select; for site navigation, use NavigationMenu. DropdownMenu implements the WAI-ARIA menu pattern with roving focus, typeahead and submenus, and has no third-party dependencies.

Source Edit docs Report an issue

Overview

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" trailingIcon={<Icon name="chevron-down" />}>
          Template actions
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit template</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuItem>Assign to users</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem destructive>Delete template</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@bindshq/stance-react';

Platforms

DropdownMenu has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@bindshq/stance-react';

Examples

Icons and shortcuts

Icons sit before the label; shortcuts are hints only and are hidden from assistive technology.

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function WithIconsAndShortcuts() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">Signature</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem icon={<Icon name="pencil" />}>
          Edit <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem icon={<Icon name="copy" />}>
          Copy HTML <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem icon={<Icon name="download" />}>Download as image</DropdownMenuItem>
        <DropdownMenuItem icon={<Icon name="send" />} disabled>
          Deploy (no integration)
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem icon={<Icon name="trash" />} destructive>
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Checkbox and radio items

Checkable items keep the menu open so several settings can be changed at once.

tsx

import * as React from 'react';
import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Checkable() {
  const [banner, setBanner] = React.useState(true);
  const [social, setSocial] = React.useState(false);
  const [layout, setLayout] = React.useState('horizontal');
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" leadingIcon={<Icon name="sliders" />}>
          Preview options
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Show</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked={banner} onCheckedChange={setBanner}>
          Promotional banner
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={social} onCheckedChange={setSocial}>
          Social icons
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Layout</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={layout} onValueChange={setLayout}>
          <DropdownMenuRadioItem value="horizontal">Horizontal</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="stacked">Stacked</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Submenus

Open with ArrowRight or hover; close with ArrowLeft or Escape.

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Submenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Share contract</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem icon={<Icon name="link" />}>Copy link</DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger icon={<Icon name="users" />}>
            Share with team
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Legal</DropdownMenuItem>
            <DropdownMenuItem>Finance</DropdownMenuItem>
            <DropdownMenuItem>Sales</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem icon={<Icon name="mail" />}>Email a copy</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Labelled groups

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Groups() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" leadingIcon={<Icon name="user" />}>
          Amara Okafor
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuGroup label="Account">
          <DropdownMenuItem icon={<Icon name="user" />}>Profile</DropdownMenuItem>
          <DropdownMenuItem icon={<Icon name="settings" />}>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup label="Organisation">
          <DropdownMenuItem icon={<Icon name="building" />}>Binds Ltd</DropdownMenuItem>
          <DropdownMenuItem icon={<Icon name="credit-card" />}>Billing</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem icon={<Icon name="log-out" />}>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

API reference

`DropdownMenu`

Prop	Type	Default	Description
`open`	`boolean`	None	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	None	Called when the menu opens or closes.

`DropdownMenuTrigger`

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render your own button (e.g. a Stance Button) as the trigger.

`DropdownMenuContent`

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side; flips when there is no room.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment against the trigger.
`sideOffset`	`number`	`6`	Gap between trigger and menu in px.
`loop`	`boolean`	`true`	Wrap arrow-key focus from last to first item.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	None	Call preventDefault to keep the menu open.

`DropdownMenuItem`

Prop	Type	Default	Description
`onSelect`	`(event: MenuSelectEvent) => void`	None	Called on click, Enter or Space. preventDefault keeps the menu open.
`icon`	`ReactNode`	None	Leading icon.
`destructive`	`boolean`	`false`	Danger styling for irreversible actions.
`disabled`	`boolean`	`false`	Skipped by keyboard and not selectable.
`closeOnSelect`	`boolean`	`true`	Close the whole menu after selection.
`textValue`	`string`	None	Text for typeahead when children are not plain text.
`inset`	`boolean`	`false`	Indent to align with checkable items.

`DropdownMenuCheckboxItem`

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	`false`	Checked state.
`onCheckedChange`	`(checked: boolean) => void`	None	Called when toggled.
`closeOnSelect`	`boolean`	`false`	Checkable items stay open by default.

`DropdownMenuRadioGroup`

Prop	Type	Default	Description
`value / defaultValue`	`string`	None	The selected radio value.
`onValueChange`	`(value: string) => void`	None	Called when a radio item is chosen.

`DropdownMenuRadioItem`

Prop	Type	Default	Description
`value`* required	`string`	None	Value of this option.

`DropdownMenuGroup`

Prop	Type	Default	Description
`label`	`ReactNode`	None	Visible heading that also labels the group.

`DropdownMenuLabel`

Prop	Type	Default	Description
`inset`	`boolean`	None	Non-interactive heading text.

`DropdownMenuShortcut`

Prop	Type	Default	Description
`children`	`ReactNode`	None	Keyboard hint shown at the end of an item (aria-hidden).

`DropdownMenuSubTrigger`

Prop	Type	Default	Description
`icon / disabled`	`ReactNode / boolean`	None	Item that opens a nested DropdownMenuSubContent.

`DropdownMenuSubContent`

Prop	Type	Default	Description
`sideOffset / alignOffset`	`number`	`2 / -5`	Offsets of the submenu against its trigger.

Accessibility

The trigger has aria-haspopup="menu", aria-expanded and aria-controls; the menu is labelled by the trigger.
Items use role menuitem, menuitemcheckbox or menuitemradio with aria-checked, so state is announced.
Focus moves into the menu on open and returns to the trigger when it closes by Escape, selection or Tab.
Disabled items expose aria-disabled and are skipped by arrow keys.
Clicks inside a submenu never dismiss the parent; clicks outside dismiss the whole menu.
High contrast mode adds a visible focus ring to the highlighted item; Windows forced colours use the system Highlight.

Keyboard

Keys	Action
`Enter` `Space` `ArrowDown`	On the trigger: open and focus the first item.
`ArrowUp`	On the trigger: open and focus the last item.
`ArrowDown` `ArrowUp`	Move between items (wraps).
`Home` `End`	First or last item.
`A to Z`	Typeahead to the next item starting with the typed text.
`Enter` `Space`	Activate the focused item.
`ArrowRight`	Open a submenu.
`ArrowLeft`	Close a submenu and return to its trigger.
`Escape`	Close the current menu level.
`Tab`	Close the menu.

Usage guidelines

Do

Group related actions and put destructive ones last, after a separator.
Keep labels short and verb-first: “Duplicate”, “Assign to users”.

Don’t

Use a menu for navigation links; use NavigationMenu.
Nest submenus more than one level deep.

Components Overlays

DropdownMenu

Stable

A menu of actions or options opened from a button, with groups, checkable items and submenus.

Source Edit docs Report an issue

Overview

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" trailingIcon={<Icon name="chevron-down" />}>
          Template actions
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit template</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuItem>Assign to users</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem destructive>Delete template</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@bindshq/stance-react';

Platforms

DropdownMenu has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@bindshq/stance-react';

Examples

Icons and shortcuts

Icons sit before the label; shortcuts are hints only and are hidden from assistive technology.

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function WithIconsAndShortcuts() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">Signature</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem icon={<Icon name="pencil" />}>
          Edit <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem icon={<Icon name="copy" />}>
          Copy HTML <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem icon={<Icon name="download" />}>Download as image</DropdownMenuItem>
        <DropdownMenuItem icon={<Icon name="send" />} disabled>
          Deploy (no integration)
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem icon={<Icon name="trash" />} destructive>
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Checkbox and radio items

Checkable items keep the menu open so several settings can be changed at once.

tsx

import * as React from 'react';
import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Checkable() {
  const [banner, setBanner] = React.useState(true);
  const [social, setSocial] = React.useState(false);
  const [layout, setLayout] = React.useState('horizontal');
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" leadingIcon={<Icon name="sliders" />}>
          Preview options
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Show</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked={banner} onCheckedChange={setBanner}>
          Promotional banner
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={social} onCheckedChange={setSocial}>
          Social icons
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Layout</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={layout} onValueChange={setLayout}>
          <DropdownMenuRadioItem value="horizontal">Horizontal</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="stacked">Stacked</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Submenus

Open with ArrowRight or hover; close with ArrowLeft or Escape.

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Submenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Share contract</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem icon={<Icon name="link" />}>Copy link</DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger icon={<Icon name="users" />}>
            Share with team
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Legal</DropdownMenuItem>
            <DropdownMenuItem>Finance</DropdownMenuItem>
            <DropdownMenuItem>Sales</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem icon={<Icon name="mail" />}>Email a copy</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Labelled groups

tsx

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon } from '@bindshq/stance-react';

export function Groups() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" leadingIcon={<Icon name="user" />}>
          Amara Okafor
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuGroup label="Account">
          <DropdownMenuItem icon={<Icon name="user" />}>Profile</DropdownMenuItem>
          <DropdownMenuItem icon={<Icon name="settings" />}>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup label="Organisation">
          <DropdownMenuItem icon={<Icon name="building" />}>Binds Ltd</DropdownMenuItem>
          <DropdownMenuItem icon={<Icon name="credit-card" />}>Billing</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem icon={<Icon name="log-out" />}>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

API reference

`DropdownMenu`

Prop	Type	Default	Description
`open`	`boolean`	None	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	None	Called when the menu opens or closes.

`DropdownMenuTrigger`

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render your own button (e.g. a Stance Button) as the trigger.

`DropdownMenuContent`

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side; flips when there is no room.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment against the trigger.
`sideOffset`	`number`	`6`	Gap between trigger and menu in px.
`loop`	`boolean`	`true`	Wrap arrow-key focus from last to first item.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	None	Call preventDefault to keep the menu open.

`DropdownMenuItem`

Prop	Type	Default	Description
`onSelect`	`(event: MenuSelectEvent) => void`	None	Called on click, Enter or Space. preventDefault keeps the menu open.
`icon`	`ReactNode`	None	Leading icon.
`destructive`	`boolean`	`false`	Danger styling for irreversible actions.
`disabled`	`boolean`	`false`	Skipped by keyboard and not selectable.
`closeOnSelect`	`boolean`	`true`	Close the whole menu after selection.
`textValue`	`string`	None	Text for typeahead when children are not plain text.
`inset`	`boolean`	`false`	Indent to align with checkable items.

`DropdownMenuCheckboxItem`

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	`false`	Checked state.
`onCheckedChange`	`(checked: boolean) => void`	None	Called when toggled.
`closeOnSelect`	`boolean`	`false`	Checkable items stay open by default.

`DropdownMenuRadioGroup`

Prop	Type	Default	Description
`value / defaultValue`	`string`	None	The selected radio value.
`onValueChange`	`(value: string) => void`	None	Called when a radio item is chosen.

`DropdownMenuRadioItem`

Prop	Type	Default	Description
`value`* required	`string`	None	Value of this option.

`DropdownMenuGroup`

Prop	Type	Default	Description
`label`	`ReactNode`	None	Visible heading that also labels the group.

`DropdownMenuLabel`

Prop	Type	Default	Description
`inset`	`boolean`	None	Non-interactive heading text.

`DropdownMenuShortcut`

Prop	Type	Default	Description
`children`	`ReactNode`	None	Keyboard hint shown at the end of an item (aria-hidden).

`DropdownMenuSubTrigger`

Prop	Type	Default	Description
`icon / disabled`	`ReactNode / boolean`	None	Item that opens a nested DropdownMenuSubContent.

`DropdownMenuSubContent`

Prop	Type	Default	Description
`sideOffset / alignOffset`	`number`	`2 / -5`	Offsets of the submenu against its trigger.

Accessibility

The trigger has aria-haspopup="menu", aria-expanded and aria-controls; the menu is labelled by the trigger.
Items use role menuitem, menuitemcheckbox or menuitemradio with aria-checked, so state is announced.
Focus moves into the menu on open and returns to the trigger when it closes by Escape, selection or Tab.
Disabled items expose aria-disabled and are skipped by arrow keys.
Clicks inside a submenu never dismiss the parent; clicks outside dismiss the whole menu.
High contrast mode adds a visible focus ring to the highlighted item; Windows forced colours use the system Highlight.

Keyboard

Keys	Action
`Enter` `Space` `ArrowDown`	On the trigger: open and focus the first item.
`ArrowUp`	On the trigger: open and focus the last item.
`ArrowDown` `ArrowUp`	Move between items (wraps).
`Home` `End`	First or last item.
`A to Z`	Typeahead to the next item starting with the typed text.
`Enter` `Space`	Activate the focused item.
`ArrowRight`	Open a submenu.
`ArrowLeft`	Close a submenu and return to its trigger.
`Escape`	Close the current menu level.
`Tab`	Close the menu.

Overview

Light, dark and high contrast

Import

Platforms

Examples

API reference

DropdownMenu

DropdownMenuTrigger

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup

DropdownMenuRadioItem

DropdownMenuGroup

DropdownMenuLabel

DropdownMenuShortcut

DropdownMenuSubTrigger

DropdownMenuSubContent

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

API reference

DropdownMenu

DropdownMenuTrigger

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup

DropdownMenuRadioItem

DropdownMenuGroup

DropdownMenuLabel

DropdownMenuShortcut

DropdownMenuSubTrigger

DropdownMenuSubContent

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

`DropdownMenu`

`DropdownMenuTrigger`

`DropdownMenuContent`

`DropdownMenuItem`

`DropdownMenuCheckboxItem`

`DropdownMenuRadioGroup`

`DropdownMenuRadioItem`

`DropdownMenuGroup`

`DropdownMenuLabel`

`DropdownMenuShortcut`

`DropdownMenuSubTrigger`

`DropdownMenuSubContent`

`DropdownMenu`

`DropdownMenuTrigger`

`DropdownMenuContent`

`DropdownMenuItem`

`DropdownMenuCheckboxItem`

`DropdownMenuRadioGroup`

`DropdownMenuRadioItem`

`DropdownMenuGroup`

`DropdownMenuLabel`

`DropdownMenuShortcut`

`DropdownMenuSubTrigger`

`DropdownMenuSubContent`