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.
Dropdowns can appear in a container (primary), or without a visible container (secondary).
<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>
Dropdowns come in the following states:
<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>
Dropdowns come in two sizes to fit desktop and mobile use cases.
<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>
Dropdowns allows an icon to be shown inside button.
<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>
Dropdowns have the following options for labels:
<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>
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.
Use dropdown menus when:
Use radios when you:
Here are a few examples of how best to use dropdowns.
Use a width that is appropriate for the content.
Stretch the width of the dropdown to fill up space.
Make sure there is enough padding (Example = 32px) between stacked dropdowns.
Avoid stacking dropdowns too close together.
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.
The dropdown’s expanded menu should not lay on top of a footer element.