Dropdowns

Dropdowns allow the user to select one item at a time from a set.

Guidelines

Dropdowns are most commonly used to give users a way to make a selection from a set of options. One option is always selected. There are two types of dropdown menus: primary & secondary.

Types

Dropdowns can appear in a container (primary), or without a visible container (secondary).

Primary
Secondary
Code
<div>
  Primary
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
  Secondary
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
    variant={1}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
</div>

States

Dropdowns come in the following states:

Default
Disabled
Code
<div>
  Default
  <DropDownGroup
    placeholder='Select Option'
    size='small'
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
  Disabled
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
</div>

Dimensions

Dropdowns come in two sizes to fit desktop and mobile use cases.

36px
44px
Code
<div>
  36px
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
  44px
  <DropDownGroup
    placeholder='Item 1'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
</div>

Icon

Dropdowns allows an icon to be shown inside button.

36px with Icon
44px with Icon
Code
<div>
  36px with Icon
  <DropDownGroup
    icon={<HomeIcon />}
    placeholder='Item 1'
    size='small'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
  44px with Icon
  <DropDownGroup
    icon={<CalendarIcon />}
    placeholder='Item 1'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One One One One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
</div>

Labels

Dropdowns have the following options for labels:

Left Label
Top Label
No Label
Code
<div>
  Left label
  <DropDownLabel>
    Label
  </DropDownLabel>
  <DropDownGroup
    placeholder='Item 1'
    size='small'
    value={["0"]}
    variant={1}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
  Top label
  <div style={{"display":"flex","flexDirection":"column"}}>
    <DropDownLabel>
      Label
    </DropDownLabel>
    <DropDownGroup
      placeholder='Item 1'
      value={["0"]}
    >
      <DropDownOption
        index={0}
        value='0'
      >
        Option One
      </DropDownOption>
      <DropDownOption
        index={1}
        value='1'
      >
        Option Two
      </DropDownOption>
    </DropDownGroup>
  </div>
  No label
  <DropDownGroup
    placeholder='Item 1'
    value={["0"]}
  >
    <DropDownOption
      index={0}
      value='0'
    >
      Option One
    </DropDownOption>
    <DropDownOption
      index={1}
      value='1'
    >
      Option Two
    </DropDownOption>
  </DropDownGroup>
</div>

Selecting the Best Dropdown

Primary dropdowns have containers in their collapsed state while secondary dropdowns do not. A good example of when to use each type is when you have filters and sorts in the same row. The filters might be the main thing you want the user to see, and should be primary drop downs. The sorts might be secondary. In fact, in Marketplace products, sorting options should always use a containerless drop down.

Layout Example

Dropdowns vs Radios

Use dropdown menus when:

  • There’s a recommended default option
  • A large number of options are available (~6 or more)

Use radios when you:

  • Want to emphasize and display all of the options
  • Have ~5 or fewer options to display
  • Want the user to be able to compare the options they have
  • Want to enable quick responses (i.e. a series of multiple choice options)

Guidance

Here are a few examples of how best to use dropdowns.

DO
appropriate width example

Use a width that is appropriate for the content.

DON'T
Wrong width example

Stretch the width of the dropdown to fill up space.

DO
Correct padding example

Make sure there is enough padding (Example = 32px) between stacked dropdowns.

DON'T
Wrong padding example

Avoid stacking dropdowns too close together.

DO
Correct dropdown expand example

If the dropdown is at the bottom of the page, have the menu expand upwards instead of downwards to ensure that the expanded state doesn’t fall into the footer.

DON'T
Wrong expand example

The dropdown’s expanded menu should not lay on top of a footer element.