Dropdown

Overview

Dropdowns are toggleable, contextual overlays for displaying list of items from which a user can select one item. A selected item can be a link or an action.

When to use:

  • Use to hide secondary actions or links in order to reduce distraction.
  • Use for a set of actions that don’t fit in the available screen space (including overflow).
  • Use when actions’ names are very long or actions require additional description.

Implementation

Dropdowns are toggleable, contextual overlays for displaying lists.

Edit the code below to see your changes live!

<Dropdown
  items={[
    {
      content: 'Edit',
      onItemClick: (item) => item,
      hash: 'edit',
      icon: <EditIcon />,
    },
    {
      content: 'Duplicate',
      onItemClick: (item) => item,
      hash: 'duplicate',
      icon: <FileCopyIcon />,
    },
    {
      content: 'Copy',
      onItemClick: (item) => item,
      hash: 'copy',
      icon: <AssignmentIcon />,
      disabled: true,
      tooltip: 'You cannot copy this item...',
    },
    {
      content: 'Delete',
      onItemClick: (item) => item,
      hash: 'delete',
      icon: <DeleteIcon />,
      actionType: 'destructive',
    },
    {
      content: 'Link',
      icon: <OpenInNewIcon />,
      type: 'link',
      url: '#',
    },
  ]}
  maxHeight={250}
  placement="bottom-start"
  toggle={<Button>Open menu</Button>}
/>

Props

Prop name
Type
Default
Description
disabledbooleanfalse

Disables the toggle.

maxHeightnumber250

Sets the max-height of the dropdown.

placementauto | auto-end | auto-start | bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-startbottom-start

Sets the placement of the Dropdown relative to the anchor.

positionFixedbooleanfalse

If set, uses position: fixed instead of position: absolute to position the list.

items *Array<DropdownItem | DropdownLinkItem> | Array<DropdownItemGroup>

Accepts an array of DropdownItems and DropdownLinkItems. It also accept a DropdownItemGroup when you want to group items. See example for usage.

toggle *ReactElement

Element used as anchor. Toggles the Dropdown.

Props ending with * are required

Do's and Don'ts

Do
Anchor the dropdown menu in the least obstructive position on the page.
Organize dropdown items in alphabetical order or by the most relevant content.
Use placeholder text by default if no selection has been made.
Don't
Avoid including complex information in a dropdown menu.
Don’t nest Dropdowns or use them to display complex information.
Don’t use icons in dropdown items unless they provide additional and necessary context.