A dropdown displays a list of two or more options when clicked.

Example

Dropdown

Buttons can also open dropdowns. Unlike momentary buttons, these buttons stay in their ‘pressed’ state until the dropdown menu disappears.

Buttons that open dropdowns must have a chevron visible. This chevron, or downward facing arrow, must be the same color as the button text.

Properties

"BlockList.Item" Component

property	propType	required	default	description
gutters	oneOf 'loose' | 'tight'	-	'loose'	Determines level of padding of item
children	node	yes	-	String or JSX that appears within the component
href	string	-	-	URL to navigate to when clicking on the item
hrefTarget	oneOf '_self' | '_blank'	-	-	Target that the link, if provided, should open in
hrefTitle	string	-	-	Sets the `title` attribute on an `href`
isDisabled	bool	-	-	Disable the item
onClick	func	-	-	Function that is run when clicking on the item
onMouseDown	func	-	-	Function that is run when mouse-down event is fired on the item
testSection	string	-	-	Hook for automated JavaScript tests

"BlockList.Category" Component

property	propType	required	default	description
children	node	yes	-	Items that appears within the category
header	node	-	-	Node or component that appears above the `children`
testSection	string	-	-	Hook for automated JavaScript tests

"BlockList" Component

property	propType	required	default	description
hasBorder	bool	-	true	Should the `BlockList` contain a border on all sides
children	node	yes	-	Should be subcomponents of `BlockList`
maxHeight	number | string	-	-	The max height of the `BlockList`. Pixels will be assumed if no unit is provided.
testSection	string	-	-	Hook for automated JavaScript tests

"Dropdown" Component

property	propType	required	default	description
arrowIcon	oneOf 'down' | 'left' | 'none' | 'right' | 'up'	-	'none'	Arrow icon direction: - Defaults to 'none', which hides the arrow - passing a prop value of false also hides the arrow - passing a prop value of true uses down arrow
activator	node	-	-	React element that when clicked activates the dropdown Either this prop OR buttonContent should be used, not both
buttonContent	string | element	-	-	Button text, can be a string or element. Either this prop OR activator should be used, not both
children	node	yes	-	Dropdown contents, typically using the <Blocklist> component.
displayError	bool	-	-	Show error state.
fullWidth	bool	-	-	Button width is either full or inline-block.
handleClick	func	-	-	Unused...
hide	func	-	-
isDisabled	bool	-	-	Disable button.
isOpen	bool	-	-
overChildren	bool	-	-
placement	oneOf 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'	-	-	Popper placement property
setOverChildren	bool	-	-
style	string	-	-	Button style, e.g. highlight, danger, outline.
testSection	string	-	-	For automated testing only.
toggle	func	-	-	Toggle control for isOpen.
width	string | number	-	-	Dropdown menu width, in pixels.
zIndex	number	-	-	Override default dropdown menu z-index.

Usage

We use the Dropdown component in two ways throughout our application:

As a select list

Typically we use Dropdown instead of <select>, because it allows for complex content like multi-line descriptions, icons, and headers.

As a menu

In rare and specific cases like the main dashboard, Dropdown is used as a menu where clicking list items launches a create-new-experiment sheet.

Best Practices