Dropdown – Carbon Design System

Preview the dropdown component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Live demo

Theme selector

Variant selector

Dropdown title

CodeSandbox React Angular Vue Vanilla

`Live editor for the $Default component`


    <Dropdown
      ariaLabel="Dropdown"
      id="carbon-dropdown-example"
      items={items}
      label="Dropdown menu options"
      titleText="Dropdown title"
    />


    <Dropdown
      ariaLabel="Dropdown"
      id="carbon-dropdown-example"
      items={items}
      label="Dropdown menu options"
      titleText="Dropdown title"
    />

Sample data

const items = [
  {
    id: 'option-1',
    label: 'Option 1',
  },
  {
    id: 'option-2',
    label: 'Option 2',
  },

Edit this page on GitHub

Dropdown: Style

Dropdown: Accessibility