Dropdown

Examples

Dropdown

Copied to clipboard

Dropdown - position right

Copied to clipboard

Dropdown - direction up

Copied to clipboard

Kebab

Copied to clipboard

React Router Link usage

A react-router Link may be wrapped by DropdownItem or used directly within Dropdown.


  /** Wrapped Link for DropdownItem list **/
  <DropdownItem key="link">
    <Link to={'/'}>Link</Link>
  </DropdownItem>

  /** Direct child of Dropdown **/
  <Dropdown
    onSelect={this.onSelect}
    toggle={
      <DropdownToggle onToggle={this.onToggle}>
        Expanded Dropdown
      </DropdownToggle>
    }
    isOpen={isOpen}
  >
    <Link to={'/'}>Link</Link>
  </Dropdown>

Copied to clipboard

Dropdown Panel

The Basic Dropdown is provided for flexibility in allowing various content within a dropdown.

Copied to clipboard

The Dropdown component accepts the following props.

Name	Type	Default	Description
children	custom	null	Anything which can be rendered in a dropdown
className	string	''	Classes applied to root element of dropdown
dropdownItems	array	[]	Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isOpen	bool	false	Flag to indicate if menu is opened
isPlain	bool	false	Display the toggle with no border or background
position	enum	DropdownPosition.left	Indicates where menu will be alligned horizontally
direction	enum	DropdownDirection.down	Display menu above or below dropdown toggle
toggle	node		Placeholder to use custom toggle elements
onSelect	func	Function.prototype	Function callback called when user selects item

KebabToggle Props

The KebabToggle component accepts the following props.

Name	Type	Default	Description
id	string	''	HTML ID of dropdown toggle
children	node	null	Anything which can be rendered as dropdown toggle
className	string	''	Classess applied to root element of dropdown toggle
isOpen	bool	false	Flag to indicate if menu is opened
aria-label	string	'Actions'	Label Toggle button
onToggle	func	Function.prototype	Callback called when toggle is clicked
parentRef	any	null	Element which wraps toggle
isFocused	bool	false	Forces focus state
isHovered	bool	false	Forces hover state
isActive	bool	false	Forces active state
isPlain	bool	false	Display the toggle with no border or background

DropdownItem Props

The DropdownItem component accepts the following props.

Name	Type	Default	Description
children	node	null	Anything which can be rendered as dropdown item
className	string	''	Classess applied to root element of dropdown item
component	custom	'a'	Indicates which component will be used as dropdown item
isDisabled	bool	false	Render dropdown item as disabled option
isHovered	bool	false	Forces display of the hover state of the element
href	string	'#'	Default hyperlink location

DropdownSeparator Props

The DropdownSeparator component accepts the following props.

Name	Type	Default	Description
children	node	null	Anything which can be rendered as dropdown item
className	string	''	Classes applied to root element of dropdown item
component	custom	'a'	Indicates which component will be used as dropdown item
isDisabled	bool	false	Render dropdown item as disabled option
isHovered	bool	false	Forces display of the hover state of the element
href	string	'#'	Default hyperlink location

DropdownToggle Props

The DropdownToggle component accepts the following props.

Name	Type	Default	Description
id	string	''	HTML ID of dropdown toggle
children	node		Anything which can be rendered as dropdown toggle
className	string	''	Classes applied to root element of dropdown toggle
isOpen	bool	false	Flag to indicate if menu is opened
onToggle	func	Function.prototype	Callback called when toggle is clicked
parentRef	any	null	Element which wraps toggle
isFocused	bool	false	Forces focus state
isHovered	bool	false	Forces hover state
isActive	bool	false	Forces active state
isPlain	bool	false	Display the toggle with no border or background
iconComponent	func	CaretDownIcon	The icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon.