React

Dropdown

Use a dropdown when you want to present a list of actions in a limited space.

ExamplesReact router link usagePropsCSS Variables

Examples

Basic

With initial selection

With groups

Disabled

Primary toggle

Position right

Direction up

With kebab

Icon only

Split button

Split button (with text)

Split button (3rd state)

Split button (disabled)

Basic

A react-router Link may be wrapped by DropdownItem or used directly within Dropdown. Here's some example JSX:

/** 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>

Props

Dropdown properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a dropdown
classNamestringClasses applied to root element of dropdown
dropdownItemsany[]Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isOpenbooleanFlag to indicate if menu is opened
isPlainbooleanDisplay the toggle with no border or background
positionDropdownPosition | 'right' | 'left'Indicates where menu will be aligned horizontally
directionDropdownDirection | 'up' | 'down'Display menu above or below dropdown toggle
isGroupedbooleanFlag to indicate if dropdown has groups
toggleReact.ReactElement<any>Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox>
autoFocusbooleanFlag to indicate if the first dropdown item should gain initial focus, set false when adding a specific auto-focus item (like a current selection) otherwise leave as true
ouiaComponentTypestring
DropdownGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullCheckboxes within group
classNamestring''Additional classes added to the DropdownGroup control
labelReact.ReactNode''Group label
DropdownItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything which can be rendered as dropdown item
classNamestring''Classes applied to root element of dropdown item
listItemClassNamestringClass to be applied to list item
componentReact.ReactNode'a'Indicates which component will be used as dropdown item
isDisabledbooleanfalseRender dropdown item as disabled option
isHoveredbooleanfalseForces display of the hover state of the element
hrefstring''Default hyperlink location
tooltipReact.ReactNodenullTooltip to display when hovered over the item
tooltipPropsany{}Additional tooltip props forwarded to the Tooltip component
DropdownToggle properties
NameTypeRequiredDefaultDescription
idstring''HTML ID of dropdown toggle
childrenReact.ReactNodenullAnything which can be rendered as dropdown toggle button
classNamestring''Classes applied to root element of dropdown toggle button
isOpenbooleanfalseFlag to indicate if menu is opened
onToggle(isOpen: boolean) => void(_isOpen: boolean) => undefined as anyCallback called when toggle is clicked
parentRefHTMLElementnullElement which wraps toggle
isFocusedbooleanfalseForces focus state
isHoveredbooleanfalseForces hover state
isActivebooleanfalseForces active state
isPlainbooleanfalseDisplay the toggle with no border or background
isDisabledbooleanfalseWhether or not the <div> has a disabled state
isPrimarybooleanfalseWhether or not the dropdown toggle button should have primary button styling
iconComponentReact.ElementType | nullCaretDownIconThe icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon.
splitButtonItemsReact.ReactNode[]Elements to display before the toggle button. When included, renders the toggle as a split button.
aria-labelstringAccessible label for the dropdown toggle button
ariaHasPopupboolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'listbox' | 'tree'Accessibility property to indicate correct has popup
type'button' | 'submit' | 'reset'Type to put on the button
onEnter(event?: React.MouseEvent<HTMLButtonElement>) => voidCallback called when the Enter key is pressed
DropdownToggleCheckbox properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DropdownToggleCheckbox
isValidbooleantrueFlag to show if the checkbox selection is valid or invalid
isDisabledbooleanfalseFlag to show if the checkbox is disabled
isCheckedboolean | nullFlag to show if the checkbox is checked
checkedboolean | nullAlternate Flag to show if the checkbox is checked
childrenReact.ReactNodeElement to be rendered inside the <span>
id