Dropdowns
Dropdowns
Dropdowns
Dropdowns
Dropdowns
Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
A dropdown menu displays a list of actions to take.
◢
Overview
Dropdown menus are usually triggered by a dropdown button.
The label of each line item must remain on one line.
USE CASES:
Revealing different options of saving when adding a new product.
Revealing more actions people can take on a table row.
Anatomy
1. Container
The container houses all options within the dropdown.
2. Line item
Each line item represents one option from the dropdown.
3. Divider (optional)
Dividers can be used to group related options together.
Examples
An example of a Dropdown when adding a new product.
Notes + Specifications
Notes + Specifications
Notes + Specifications
–————
Style
Corner radius: 4px
Left & right padding: 16px
Top & bottom padding: 8px
Shadow: Floating
Line item height: 36px
Line item label: Source Sans Pro, Regular, 16px
