Dropdown

View source on GitHub

Dropdown displays a list of actions, options or links. It is triggered when a user interacts with a Button, Textfield or other control. Dropdown allows for complex functionality that can’t be accomplished with SelectList.

also known as Menu, Contextual Menu

Figma:

Web:

iOS:

Android:

A11y:

function Example() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex height="100%" justifyContent="center">
      <Button
        accessibilityControls="demo-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text="Menu"
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="demo-dropdown-example"
          onDismiss={() => setOpen(false)}
        >
          <Dropdown.Item
            onSelect={onSelect}
            option={{ value: 'item 1', label: 'Item 1' }}
            selected={selected}
          />
          <Dropdown.Item
            onSelect={onSelect}
            option={{
              value: 'item 2',
              label: 'Item 2 with a really long, detailed, complex name',
            }}
            selected={selected}
          />
          <Dropdown.Link
            href="https://pinterest.com"
            isExternal
            option={{
              value: 'item 3',
              label: 'Item 3 with a really long, detailed, complex name',
            }}
          />
          <Dropdown.Item
            badge={{ text: 'New' }}
            onSelect={onSelect}
            option={{ value: 'item 4', label: 'Item 4' }}
            selected={selected}
          />
          <Dropdown.Link
            badge={{ text: 'New' }}
            href="https://pinterest.com"
            isExternal
            option={{ value: 'item 5', label: 'Item 5 with a really long, detailed name' }}
          />
          <Dropdown.Link
            href="/combobox"
            option={{ value: 'item 6', label: 'Item 6 navigates internally' }}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex height="100%" justifyContent="center">
      <Button
        accessibilityControls="demo-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text="Menu"
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="demo-dropdown-example"
          onDismiss={() => setOpen(false)}
        >
          <Dropdown.Item
            onSelect={onSelect}
            option={{ value: 'item 1', label: 'Item 1' }}
            selected={selected}
          />
          <Dropdown.Item
            onSelect={onSelect}
            option={{
              value: 'item 2',
              label: 'Item 2 with a really long, detailed, complex name',
            }}
            selected={selected}
          />
          <Dropdown.Link
            href="https://pinterest.com"
            isExternal
            option={{
              value: 'item 3',
              label: 'Item 3 with a really long, detailed, complex name',
            }}
          />
          <Dropdown.Item
            badge={{ text: 'New' }}
            onSelect={onSelect}
            option={{ value: 'item 4', label: 'Item 4' }}
            selected={selected}
          />
          <Dropdown.Link
            badge={{ text: 'New' }}
            href="https://pinterest.com"
            isExternal
            option={{ value: 'item 5', label: 'Item 5 with a really long, detailed name' }}
          />
          <Dropdown.Link
            href="/combobox"
            option={{ value: 'item 6', label: 'Item 6 navigates internally' }}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

Props

Component props
Name	Type	Default
`children` Required	`React.ChildrenArray<React.Element<typeof DropdownItem \| typeof DropdownSection>>`	-
	Must be instances of Dropdown.Item, Dropdown.Link or Dropdown.Section components. See the Types of items variant to learn more.
`id` Required	`string`	-
	Unique id to identify each Dropdown. Used for Accessibility purposes.
`onDismiss` Required	`() => void`	-
	Callback fired when the menu is closed.
`anchor`	`?HTMLElement`	-
	Ref for the element that the Dropdown will attach to, will most likely be a Button. See the Accessibility guidelines to learn more.
`headerContent`	`React.Node`	-
	Content to display at the top of the Dropdown before any items or sections. See the Custom header variant to learn more.
`idealDirection`	`"up" \| "right" \| "down" \| "left"`	`"down"`
	Preferred direction for the Dropdown to open.
`isWithinFixedContainer`	`boolean`	`false`
	Enables correct behavior when Dropdown is used within a fixed container. To achieve this it removes the Layer component around Popover and enables positioning relative to its anchor element. Should only be used in cases where Layer breaks the Dropdown positionings such as when the anchor element is within a sticky component.
`zIndex`	`Indexable`	-
	An object representing the zIndex value of the Dropdown menu. Learn more about zIndex classes

Usage guidelines

When to use

Displaying a list of actions, options, or links. Usually displays 3 or more options.
Allowing complex functionality that a SelectList can't accomplish.
Taking immediate action or navigating users to another view.

When not to use

In cases when there are less than 3 items in the list, and there is space to display all options. Consider RadioGroup or Checkboxes instead.
When it is desirable to filter a long list of options. Use ComboBox instead.
Displaying a list of actions or options using the browser's native select functionality. Use SelectList instead.

Best practices

Use Dropdown when features such as subtext, custom headers or badges are needed, since this functionality is not available in SelectList.

Don't

Use Dropdown for a simple list of items. Use SelectList instead for the added native mobile functionality. The exception to this is multiple Dropdowns or SelectLists that could be grouped together to create visual inconsistency, such as filters. In this case, use Dropdowns for all.

Order the items in Dropdown either alphabetically or by usage. Place destructive actions at the bottom.

Don't

Attach Tooltips to menu items. Use the `subtext` property if additional explanation is needed.

Add an icon indicator when links are external using the isExternal prop. External links are either links outside of Pinterest or another sub-site of Pinterest.

Don't

Add custom elements within Dropdown. While some custom elements may be technically possible, it is best to avoid customization that becomes difficult to maintain.

Accessibility

Ready

ARIA attributes

Remember to include the following ARIA attributes on the element used for the anchor prop:

accessibilityControls: lets the screen reader know that this element controls the Dropdown menu (should match the id property passed to Dropdown). Populates the aria-controls attribute.
accessibilityHaspopup: lets the screen reader know that there is a Dropdown menu linked to the trigger. Populates the aria-haspopup attribute.
accessibilityExpanded: informs the screen reader whether the Dropdown menu is currently open or closed. Populates the aria-expanded attribute.

Keyboard interaction

Hitting Enter or Space key on the Dropdown's trigger opens the menu
Escape key closes the menu, while moving focus back on the Dropdown's trigger
Arrow keys are used to navigate items within the menu
Enter key selects an item within the Menu
Tab or Shift + Tab close the menu and move focus accordingly

Localization

Truncation

When the text of the Dropdown.Item becomes longer than the width of the menu, either intentionally or through localization, the text will truncate at one line. Subtext will wrap as needed to display the full text.

function TruncationDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item.value === (selected || {}).value ? null : item);

  return (
    <Flex justifyContent="center">
      <Button
        accessibilityControls="truncation-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text="Menu"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="truncation-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Item
            badge={{ text: 'New' }}
            onSelect={onSelect}
            option={{
              value: 'Homefeed anpassen',
              label: 'Homefeed anpassen',
              subtext:
                'Aktualisieren Sie Ihren Homefeed, um Ihre Vorlieben und Ideen besser widerzuspiegeln',
            }}
            selected={selected}
          />
          <Dropdown.Link
            href="https://help.pinterest.com/en?source=gear_menu_web"
            isExternal
            option={{ value: 'Hilfe anfordern', label: 'Hilfe anfordern' }}
          />
          <Dropdown.Link
            href="https://policy.pinterest.com/en/privacy-policy"
            isExternal
            option={{
              value: 'Nutzungsbedingungen und Datenschutzrichtlinien anzeigen',
              label: 'Nutzungsbedingungen und Datenschutzrichtlinien anzeigen',
            }}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

function TruncationDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item.value === (selected || {}).value ? null : item);

  return (
    <Flex justifyContent="center">
      <Button
        accessibilityControls="truncation-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text="Menu"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="truncation-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Item
            badge={{ text: 'New' }}
            onSelect={onSelect}
            option={{
              value: 'Homefeed anpassen',
              label: 'Homefeed anpassen',
              subtext:
                'Aktualisieren Sie Ihren Homefeed, um Ihre Vorlieben und Ideen besser widerzuspiegeln',
            }}
            selected={selected}
          />
          <Dropdown.Link
            href="https://help.pinterest.com/en?source=gear_menu_web"
            isExternal
            option={{ value: 'Hilfe anfordern', label: 'Hilfe anfordern' }}
          />
          <Dropdown.Link
            href="https://policy.pinterest.com/en/privacy-policy"
            isExternal
            option={{
              value: 'Nutzungsbedingungen und Datenschutzrichtlinien anzeigen',
              label: 'Nutzungsbedingungen und Datenschutzrichtlinien anzeigen',
            }}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

Subcomponents

Use Dropdown.Item for action & selection, when the Dropdown item triggers an action or selects an option.

Dropdown.Item subcomponent props
Name	Type	Default
`onSelect` Required	`({\| event: SyntheticInputEvent<HTMLInputElement>, item: {\| label: string, subtext?: string, value: string, \|}, \|}) => void`	-
	Callback when the user selects an item using the mouse or keyboard.
`option` Required	`{\| label: string, subtext?: string, value: string, \|}`	-
	Object detailing the label, value, and optional subtext for this item.
`badge`	`{\| text: string, type?: "info" \| "error" \| "warning" \| "success" \| "neutral" \| "darkWash" \| "lightWash", \|}`	-
	When supplied, will display a Badge next to the item's label. See the Badges variant to learn more.
`children`	`React.Node`	-
	If needed, users can supply custom content to each Dropdown Item. This can be useful when extra functionality is needed beyond a basic Link. See the Custom item content variant to learn more.
`dataTestId`	`string`	-
	When supplied, will add a data-test-id prop to the dom element.
`selected`	`{\| label: string, subtext?: string, value: string, \|} \| $ReadOnlyArray<{\| label: string, subtext?: string, value: string, \|}> \| null`	-
	Either the selected item info or an array of selected items, used to determine when the "selected" icon appears on an item.

Use Dropdown.Link for navigation, when the Dropdown item navigates to a new page.

Dropdown.Link subcomponent props
Name	Type	Default
`href` Required	`string`	-
	Directs users to the url when item is selected. See the Types of items variant to learn more.
`option` Required	`{\| label: string, subtext?: string, value: string, \|}`	-
	Object detailing the label, value, and optional subtext for this item.
`badge`	`{\| text: string, type?: "info" \| "error" \| "warning" \| "success" \| "neutral" \| "darkWash" \| "lightWash", \|}`	-
	When supplied, will display a Badge next to the item's label. See the Badges variant to learn more.
`children`	`React.Node`	-
	If needed, users can supply custom content to each Dropdown Link. This can be useful when extra functionality is needed beyond a basic Link. See the Custom item content variant to learn more.
`dataTestId`	`string`	-
	When supplied, will add a data-test-id prop to the dom element.
`isExternal`	`boolean`	-
	When true, adds an arrow icon to the end of the item to signal this item takes users to an external source and opens the link in a new tab. Do not add if the item navigates users within the app. See the Best practices for more info.
`onClick`	`({\| event: SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void`	-
	Callback fired when clicked (pressed and released) with a mouse or keyboard. See OnLinkNavigationProvider to learn more about link navigation.

Use Dropdown.Section to create hierarchy within a single Dropdown.

Dropdown.Section subcomponent props
Name	Type	Default
`children` Required	`React.ChildrenArray<React.Element<typeof DropdownItem \| typeof DropdownSection>>`	-
	Any Dropdown.Items and/or Dropdown.Links to be rendered
`label` Required	`string`	-
	Label for the section. See the Sections variant for more info.

Variants

Types of items

function ActionDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <Button
        accessibilityControls="action-variant-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text={selected ? selected.label : 'Display'}
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="action-variant-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Item
            onSelect={onSelect}
            option={{ value: 'Cozy', label: 'Cozy' }}
            selected={selected}
          />
          <Dropdown.Item
            onSelect={onSelect}
            option={{ value: 'Comfy', label: 'Comfy' }}
            selected={selected}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

function ActionDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <Button
        accessibilityControls="action-variant-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text={selected ? selected.label : 'Display'}
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="action-variant-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Item
            onSelect={onSelect}
            option={{ value: 'Cozy', label: 'Cozy' }}
            selected={selected}
          />
          <Dropdown.Item
            onSelect={onSelect}
            option={{ value: 'Comfy', label: 'Comfy' }}
            selected={selected}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

Action/Selection

Typically a Dropdown item triggers an action, like “Hide a Pin”, or makes a selection, like “Cozy” for a layout setting. Use Dropdown.Item for these use cases. onSelect handles the user interaction, with the optional selected indicating the currently-selected item.

function LinkDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="link-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="arrow-down"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="link-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Link
            href="https://pinterest.com"
            option={{ value: 'Create new board', label: 'Create new board' }}
          />
          <Dropdown.Link
            href="https://help.pinterest.com/en?source=gear_menu_web"
            isExternal
            onClick={() => { /* log click here */ }}
            option={{ value: 'Get help', label: 'Get help' }}
          />
          <Dropdown.Link
            href="https://policy.pinterest.com/en/privacy-policy"
            isExternal
            option={{ value: 'See terms and privacy', label: 'See terms and privacy' }}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

function LinkDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="link-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="arrow-down"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="link-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Link
            href="https://pinterest.com"
            option={{ value: 'Create new board', label: 'Create new board' }}
          />
          <Dropdown.Link
            href="https://help.pinterest.com/en?source=gear_menu_web"
            isExternal
            onClick={() => { /* log click here */ }}
            option={{ value: 'Get help', label: 'Get help' }}
          />
          <Dropdown.Link
            href="https://policy.pinterest.com/en/privacy-policy"
            isExternal
            option={{ value: 'See terms and privacy', label: 'See terms and privacy' }}
          />
        </Dropdown>
      )}
    </Flex>
  );
}

Link

If an item navigates to a new page, use Dropdown.Link with the required href prop. If the item navigates to a page outside of the current context, (either a non-Pinterest site or a different Pinterest sub-site), the isExternal prop should also be specified to display the "up-right" icon. Optional additional actions to be taken on navigation are handled by onClick. Dropdown.Link can be paired with OnLinkNavigationProvider. See OnLinkNavigationProvider to learn more about link navigation.

Sections

Dropdown can also be composed of Dropdown.Section(s), which simply require a label. Use Dropdown.Section(s) to create hierarchy within a single Dropdown. Dropdown.Sections, Dropdown.Items and Dropdown.Links can be mixed as needed.

function SectionsIconButtonDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => {
    if (selected.some(({ value }) => value === item.value )) {
      setSelected((selected) => selected.filter(({ value }) => value != item.value));
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="sections-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        bgColor="lightGray"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="sections-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Section', label: 'Section' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

function SectionsIconButtonDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => {
    if (selected.some(({ value }) => value === item.value )) {
      setSelected((selected) => selected.filter(({ value }) => value != item.value));
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="sections-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        bgColor="lightGray"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="sections-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Section', label: 'Section' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

Custom header

Dropdown can also contain a custom header by specifying headerContent, which always appears at the very top of the menu. It can be used instead of a section header if the menu contains only one type of content that needs additional description. It can contain anything, but most often will contain just text and/or a link.

function CustomHeaderExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <Button
        accessibilityControls="header-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text="Menu"
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          headerContent={
            <Text align="start" size="100">
              This Pin was inspired by your{' '}
              <Text weight="bold" size="100">
                <Link href="https://pinterest.com">recent activity</Link>
              </Text>
            </Text>
          }
          id="header-dropdown-example"
          onDismiss={() => {
            setOpen(false);
          }}
        >
          <Dropdown.Item
            onSelect={() => alert('Pin has been hidden')}
            option={{ value: 'item 1', label: 'Hide Pin' }}
            selected={selected}
          />
          <Dropdown.Link
            href="https://pinterest.com"
            isExternal
            option={{
              value: 'item 2',
              label: 'Report Pin',
            }}
            selected={selected}
          />
          <Dropdown.Section label="View options">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'item 3', label: 'Default' }}
              selected={selected}
            />
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'item 4', label: 'Compact' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'item 5', label: 'List' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

function CustomHeaderExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <Button
        accessibilityControls="header-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        iconEnd="arrow-down"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
        text="Menu"
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          headerContent={
            <Text align="start" size="100">
              This Pin was inspired by your{' '}
              <Text weight="bold" size="100">
                <Link href="https://pinterest.com">recent activity</Link>
              </Text>
            </Text>
          }
          id="header-dropdown-example"
          onDismiss={() => {
            setOpen(false);
          }}
        >
          <Dropdown.Item
            onSelect={() => alert('Pin has been hidden')}
            option={{ value: 'item 1', label: 'Hide Pin' }}
            selected={selected}
          />
          <Dropdown.Link
            href="https://pinterest.com"
            isExternal
            option={{
              value: 'item 2',
              label: 'Report Pin',
            }}
            selected={selected}
          />
          <Dropdown.Section label="View options">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'item 3', label: 'Default' }}
              selected={selected}
            />
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'item 4', label: 'Compact' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'item 5', label: 'List' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

Subtext

Each Dropdown item can also contain subtext below the label. This subtext will wrap if needed. Use this text to add an additional description of the Dropdown item.

function SubtextDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const onSelect = ({item}) => {
    if (selected.some(({ value }) => value === item.value )) {
      setSelected((selected) => selected.filter(({ value }) => value != item.value));
    } else {
      setSelected(selected => [...selected, item]);
    }
  };

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="subtext-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="arrow-down"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="subtext-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Section label="Accounts">
            <Dropdown.Item
              onSelect={onSelect}
              option={{
                value: 'Pepper the Pupper',
                label: 'Pepper the Pupper',
                subtext: 'pepper@thepupper.com',
              }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{
                value: 'Mizu the Kitty',
                label: 'Mizu the Kitty',
                subtext: 'mizu@thekitty.com',
              }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="More options">
            <Dropdown.Item
              onSelect={onSelect}
              option={{
                value: 'Settings',
                label: 'Settings',
              }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Tune your home feed', label: 'Tune your home feed' }}
              selected={selected}
            />
            <Dropdown.Link
              href="https://pinterest.com"
              isExternal
              option={{ value: 'Get help', label: 'Get help' }}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

function SubtextDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const onSelect = ({item}) => {
    if (selected.some(({ value }) => value === item.value )) {
      setSelected((selected) => selected.filter(({ value }) => value != item.value));
    } else {
      setSelected(selected => [...selected, item]);
    }
  };

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="subtext-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="arrow-down"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="subtext-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Section label="Accounts">
            <Dropdown.Item
              onSelect={onSelect}
              option={{
                value: 'Pepper the Pupper',
                label: 'Pepper the Pupper',
                subtext: 'pepper@thepupper.com',
              }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{
                value: 'Mizu the Kitty',
                label: 'Mizu the Kitty',
                subtext: 'mizu@thekitty.com',
              }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="More options">
            <Dropdown.Item
              onSelect={onSelect}
              option={{
                value: 'Settings',
                label: 'Settings',
              }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Tune your home feed', label: 'Tune your home feed' }}
              selected={selected}
            />
            <Dropdown.Link
              href="https://pinterest.com"
              isExternal
              option={{ value: 'Get help', label: 'Get help' }}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

Badges

A Badge can be used to indicate a new product surface or feature within the Dropdown using badgeText. Multiple badges within a Dropdown should be avoided when possible.

function BadgesDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const onSelect = ({item}) => {
    if (selected.some(({ value }) => value === item.value )) {
      setSelected((selected) => selected.filter(({ value }) => value != item.value));
    } else {
      setSelected(selected => [...selected, item]);
    }
  };

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="badges-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="badges-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Section', label: 'Section' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

function BadgesDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const onSelect = ({item}) => {
    if (selected.some(({ value }) => value === item.value )) {
      setSelected((selected) => selected.filter(({ value }) => value != item.value));
    } else {
      setSelected(selected => [...selected, item]);
    }
  };

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="badges-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="badges-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Section', label: 'Section' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Flex>
  );
}

Custom item content

If needed, users can supply custom content to each Dropdown.Item or Dropdown.Link. This can be useful when extra functionality is needed. However, please use with caution and only when absolutely necessary.

To ensure the entire width of the item is clickable, you will likely need to surround your custom content with a full-width Box.

function CustomIconButtonPopoverExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="custom-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="custom-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Link
            isExternal
            option={{ value: 'item 1', label: 'Custom link 1' }}
          >
            <Box width="100%">
              <Text>
                <Link hoverStyle="none" href="https://pinterest.com" target="blank">
                  Custom link 1
                </Link>
              </Text>
            </Box>
          </Dropdown.Link>
          <Dropdown.Link
            isExternal
            option={{ value: 'item 2', label: 'Another custom link' }}
          >
            <Box width="100%">
              <Text>
                <Link hoverStyle="none" href="https://google.com" target="blank">
                  Another custom link
                </Link>
              </Text>
            </Box>
          </Dropdown.Link>
        </Dropdown>
      )}
    </Flex>
  );
}

function CustomIconButtonPopoverExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center">
      <IconButton
        accessibilityControls="custom-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown anchor={anchorRef.current} id="custom-dropdown-example" onDismiss={() => setOpen(false)}>
          <Dropdown.Link
            isExternal
            option={{ value: 'item 1', label: 'Custom link 1' }}
          >
            <Box width="100%">
              <Text>
                <Link hoverStyle="none" href="https://pinterest.com" target="blank">
                  Custom link 1
                </Link>
              </Text>
            </Box>
          </Dropdown.Link>
          <Dropdown.Link
            isExternal
            option={{ value: 'item 2', label: 'Another custom link' }}
          >
            <Box width="100%">
              <Text>
                <Link hoverStyle="none" href="https://google.com" target="blank">
                  Another custom link
                </Link>
              </Text>
            </Box>
          </Dropdown.Link>
        </Dropdown>
      )}
    </Flex>
  );
}

Subcomponent composability

Under the hood, Dropdown executes two actions: recognizing subcomponents by display name and sequencially indexing each subcomponent for keyboard navigation.

Dropdown requires its own subcomponents as children to build the list of actions.

When building a Dropdown, we might want to render different combinations of subcomponents conditionally. Dropdown supports simple conditional rendering of subcomponents lists wrapped in React.Fragment as well as consecutive arrays of subcomponent arrays. See the example below which illustrates both of these cases. More logic complexity might break the correct Dropdown behavior.

function Example() {
  const [open, setOpen] = React.useState(false);
  const [switched, setSwitched] = React.useState(true);
  const [selected, setSelected] = React.useState(null);

  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center" direction="column" gap={4}>
      <Box display="flex" alignItems="center">
        <Box paddingX={2}>
          <Label htmlFor="dropdown-example">
            <Text>Toggle Dropdown subcomponents</Text>
          </Label>
        </Box>
        <Switch
          onChange={() => setSwitched((value) => !value)}
          id="dropdown-example"
          switched={switched}
        />
      </Box>
      <IconButton
        accessibilityControls="custom-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="custom-dropdown-example"
          onDismiss={() => setOpen(false)}
        >
          {switched ? (
            <React.Fragment>
              <Dropdown.Link isExternal option={{ value: 'item 1', label: 'Custom link 1' }}>
                <Box width="100%">
                  <Text>
                    <Link hoverStyle="none" href="https://pinterest.com" target="blank">
                      Custom link 1
                    </Link>
                  </Text>
                </Box>
              </Dropdown.Link>
              <Dropdown.Link isExternal option={{ value: 'item 2', label: 'Another custom link' }}>
                <Box width="100%">
                  <Text>
                    <Link hoverStyle="none" href="https://google.com" target="blank">
                      Another custom link
                    </Link>
                  </Text>
                </Box>
              </Dropdown.Link>
            </React.Fragment>
          ) : (
            <React.Fragment>
              {[1, 2, 3, 4, 5, 6].map((x) => (
                <Dropdown.Item
                  key={x}
                  onSelect={() => {}}
                  option={{ value: x.toString(), label: x.toString() }}
                />
              ))}
              {[7, 8, 9, 10, 11, 12].map((x) => (
                <Dropdown.Item
                  key={x}
                  onSelect={() => {}}
                  option={{ value: x.toString(), label: x.toString() }}
                />
              ))}
            </React.Fragment>
          )}
        </Dropdown>
      )}
    </Flex>
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);
  const [switched, setSwitched] = React.useState(true);
  const [selected, setSelected] = React.useState(null);

  const anchorRef = React.useRef(null);
  const onSelect = ({ item }) => setSelected(item);

  return (
    <Flex justifyContent="center" direction="column" gap={4}>
      <Box display="flex" alignItems="center">
        <Box paddingX={2}>
          <Label htmlFor="dropdown-example">
            <Text>Toggle Dropdown subcomponents</Text>
          </Label>
        </Box>
        <Switch
          onChange={() => setSwitched((value) => !value)}
          id="dropdown-example"
          switched={switched}
        />
      </Box>
      <IconButton
        accessibilityControls="custom-dropdown-example"
        accessibilityExpanded={open}
        accessibilityHaspopup
        accessibilityLabel="More Options"
        icon="add"
        iconColor="darkGray"
        onClick={() => setOpen((prevVal) => !prevVal)}
        ref={anchorRef}
        selected={open}
        size="lg"
      />
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="custom-dropdown-example"
          onDismiss={() => setOpen(false)}
        >
          {switched ? (
            <React.Fragment>
              <Dropdown.Link isExternal option={{ value: 'item 1', label: 'Custom link 1' }}>
                <Box width="100%">
                  <Text>
                    <Link hoverStyle="none" href="https://pinterest.com" target="blank">
                      Custom link 1
                    </Link>
                  </Text>
                </Box>
              </Dropdown.Link>
              <Dropdown.Link isExternal option={{ value: 'item 2', label: 'Another custom link' }}>
                <Box width="100%">
                  <Text>
                    <Link hoverStyle="none" href="https://google.com" target="blank">
                      Another custom link
                    </Link>
                  </Text>
                </Box>
              </Dropdown.Link>
            </React.Fragment>
          ) : (
            <React.Fragment>
              {[1, 2, 3, 4, 5, 6].map((x) => (
                <Dropdown.Item
                  key={x}
                  onSelect={() => {}}
                  option={{ value: x.toString(), label: x.toString() }}
                />
              ))}
              {[7, 8, 9, 10, 11, 12].map((x) => (
                <Dropdown.Item
                  key={x}
                  onSelect={() => {}}
                  option={{ value: x.toString(), label: x.toString() }}
                />
              ))}
            </React.Fragment>
          )}
        </Dropdown>
      )}
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Button, IconButton
It is most common to anchor Dropdown to Button or IconButton.

ScrollBoundaryContainer
ScrollableContainer is needed for proper positioning when the Dropdown is located within a scrolling container. The use of ScrollableContainer ensures the Dropdown remains attached to its anchor when scrolling.

SelectList
If users need to select from a short, simple list (without needing sections, subtext details, or the ability to filter the list), use SelectList.

ComboBox
If users need the ability to choose an option by typing in an input and filtering a long list of options, use ComboBox.

OnLinkNavigationProvider
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.

Edit page on GitHub

Dropdown

Props

Usage guidelines

Best practices

Accessibility

ARIA attributes

Keyboard interaction

Localization

Truncation

Subcomponents

Dropdown.Item

Dropdown.Item Props

Dropdown.Link

Dropdown.Link Props

Dropdown.Section

Dropdown.Section Props

Variants

Types of items

Sections

Custom header

Subtext

Badges

Custom item content

Subcomponent composability

Component quality checklist

Related