React

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

ExamplesPropsCSS variables

Examples

Simple dropdown

Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard

Split button

Copied to clipboard

Split button (with text)

Copied to clipboard

Split button (3rd state)

Copied to clipboard

Split button (disabled)

Copied to clipboard

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

Copied to clipboard

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

Copied to clipboard

Props

The DropdownGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullCheckboxes within group
classNamestring''Additional classes added to the DropdownGroup control
labelReact.ReactNode''Group label

The DropdownItem component accepts the following props.

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

The Dropdown component accepts the following props.

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

The DropdownToggle component accepts the following props.

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

The DropdownToggleCheckbox component accepts the following props.

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>
idstringId of the checkbox
aria-labelstringAria-label of the checkbox
onChange() => undefined as any

CSS variables

--pf-c-dropdown__c-divider--MarginBottomc_dropdown__c_divider_MarginBottom0.5rem
--pf-c-dropdown__c-divider--MarginTopc_dropdown__c_divider_MarginTop0.5rem
--pf-c-dropdown__group--PaddingTopc_dropdown__group_PaddingTop0.5rem
--pf-c-dropdown__group--first-child--PaddingTopc_dropdown__group_first_child_PaddingTop0.5rem
--pf-c-dropdown__group-title--Colorc_dropdown__group_title_Color#737679
--pf-c-dropdown__group-title--FontSizec_dropdown__group_title_FontSize0.875rem
--pf-c-dropdown__group-title--FontWeightc_dropdown__group_title_FontWeight700
--pf-c-dropdown__group-title--PaddingBottomc_dropdown__group_title_PaddingBottom0.5rem
--pf-c-dropdown__group-title--PaddingLeftc_dropdown__group_title_PaddingLeft1rem
--pf-c-dropdown__group-title--PaddingRightc_dropdown__group_title_PaddingRight1rem
--pf-c-dropdown__menu--BackgroundColorc_dropdown__menu_BackgroundColor#fff
--pf-c-dropdown__menu--BorderWidthc_dropdown__menu_BorderWidth1px
--pf-c-dropdown__menu--BoxShadowc_dropdown__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-dropdown__menu--PaddingBottomc_dropdown__menu_PaddingBottom0.5rem
--pf-c-dropdown__menu--PaddingTopc_dropdown__menu_PaddingTop0.5rem
--pf-c-dropdown__menu--Topc_dropdown__menu_Top0
--pf-c-dropdown__menu--ZIndexc_dropdown__menu_ZIndex200
--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColortransparent
--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color#737679
--pf-c-dropdown__menu-item--FontSizec_dropdown__menu_item_FontSize1rem
--pf-c-dropdown__menu-item--FontWeightc_dropdown__menu_item_FontWeight400
--pf-c-dropdown__menu-item--LineHeightc_dropdown__menu_item_LineHeight1.5
--pf-c-dropdown__menu-item--PaddingBottomc_dropdown__menu_item_PaddingBottom0.5rem
--pf-c-dropdown__menu-item--PaddingLeftc_dropdown__menu_item_PaddingLeft1rem
--pf-c-dropdown__menu-item--PaddingRightc_dropdown__menu_item_PaddingRight1rem
--pf-c-dropdown__menu-item--PaddingTopc_dropdown__menu_item_PaddingTop0.5rem
--pf-c-dropdown__menu-item--disabled--BackgroundColorc_dropdown__menu_item_disabled_BackgroundColortransparent
--pf-c-dropdown__menu-item--disabled--Colorc_dropdown__menu_item_disabled_Color#737679
--pf-c-dropdown__menu-item--hover--BackgroundColorc_dropdown__menu_item_hover_BackgroundColor#ededed
--pf-c-dropdown__menu-item--hover--Colorc_dropdown__menu_item_hover_Color#151515
--pf-c-dropdown__separator--BackgroundColorc_dropdown__separator_BackgroundColor#d2d2d2
--pf-c-dropdown__separator--Heightc_dropdown__separator_Height1px
--pf-c-dropdown__separator--MarginBottomc_dropdown__separator_MarginBottom0.5rem
--pf-c-dropdown__separator--MarginTopc_dropdown__separator_MarginTop0.5rem
--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor#004080
--pf-c-dropdown__toggle--BorderBottomColorc_dropdown__toggle_BorderBottomColor#06c
--pf-c-dropdown__toggle--BorderLeftColorc_dropdown__toggle_BorderLeftColor#ededed
--pf-c-dropdown__toggle--BorderRightColorc_dropdown__toggle_BorderRightColor#ededed
--pf-c-dropdown__toggle--BorderTopColorc_dropdown__toggle_BorderTopColor#ededed
--pf-c-dropdown__toggle--BorderWidthc_dropdown__toggle_BorderWidth1px
--pf-c-dropdown__toggle--Colorc_dropdown__toggle_Color#fff
--pf-c-dropdown__toggle--FontSizec_dropdown__toggle_FontSize1rem
--pf-c-dropdown__toggle--FontWeightc_dropdown__toggle_FontWeight400
--pf-c-dropdown__toggle--LineHeightc_dropdown__toggle_LineHeight1.5
--pf-c-dropdown__toggle--MinWidthc_dropdown__toggle_MinWidth44px
--pf-c-dropdown__toggle--PaddingBottomc_dropdown__toggle_PaddingBottom0.375rem
--pf-c-dropdown__toggle--PaddingLeftc_dropdown__toggle_PaddingLeft0.5rem
--pf-c-dropdown__toggle--PaddingRightc_dropdown__toggle_PaddingRight0.5rem
--pf-c-dropdown__toggle--PaddingTopc_dropdown__toggle_PaddingTop0.375rem
--pf-c-dropdown__toggle--active--BorderBottomColorc_dropdown__toggle_active_BorderBottomColor#06c
--pf-c-dropdown__toggle--active--BorderBottomWidthc_dropdown__toggle_active_BorderBottomWidth2px
--pf-c-dropdown__toggle-button--Colorc_dropdown__toggle_button_Color#151515
--pf-c-dropdown__toggle--disabled--BackgroundColorc_dropdown__toggle_disabled_BackgroundColor#ededed
--pf-c-dropdown__toggle--expanded--BorderBottomColorc_dropdown__toggle_expanded_BorderBottomColor#06c
--pf-c-dropdown__toggle--expanded--BorderBottomWidthc_dropdown__toggle_expanded_BorderBottomWidth2px
--pf-c-dropdown__toggle--focus--BorderBottomColorc_dropdown__toggle_focus_BorderBottomColor#06c
--pf-c-dropdown__toggle--focus--BorderBottomWidthc_dropdown__toggle_focus_BorderBottomWidth2px
--pf-c-dropdown__toggle--hover--BorderBottomColorc_dropdown__toggle_hover_BorderBottomColor#06c
--pf-c-dropdown__toggle-icon--MarginLeftc_dropdown__toggle_icon_MarginLeft1rem
--pf-c-dropdown__toggle-icon--MarginRightc_dropdown__toggle_icon_MarginRight0.5rem
--pf-c-dropdown__toggle--m-plain--BorderColorc_dropdown__toggle_m_plain_BorderColortransparent
--pf-c-dropdown__toggle--m-plain--Colorc_dropdown__toggle_m_plain_Color#d2d2d2
--pf-c-dropdown__toggle--m-plain--disabled--Colorc_dropdown__toggle_m_plain_disabled_Color#d2d2d2
--pf-c-dropdown__toggle--m-plain--hover--Colorc_dropdown__toggle_m_plain_hover_Color#151515
--pf-c-dropdown__toggle--m-primary--BackgroundColorc_dropdown__toggle_m_primary_BackgroundColor#06c
--pf-c-dropdown__toggle--m-primary--Colorc_dropdown__toggle_m_primary_Color#fff
--pf-c-dropdown__toggle--m-primary--active--BackgroundColorc_dropdown__toggle_m_primary_active_BackgroundColor#004080
--pf-c-dropdown__toggle--m-primary--focus--BackgroundColorc_dropdown__toggle_m_primary_focus_BackgroundColor#004080
--pf-c-dropdown__toggle--m-primary--hover--BackgroundColorc_dropdown__toggle_m_primary_hover_BackgroundColor#004080
--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Transformc_dropdown__toggle_m_split_button__toggle_check__input_TransformtranslateY(-0.0625rem)
--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeftc_dropdown__toggle_m_split_button__toggle_text_MarginLeft0.5rem
--pf-c-dropdown__toggle--m-split-button--child--BackgroundColorc_dropdown__toggle_m_split_button_child_BackgroundColortransparent
--pf-c-dropdown__toggle--m-split-button--child--PaddingBottomc_dropdown__toggle_m_split_button_child_PaddingBottom0.375rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingLeftc_dropdown__toggle_m_split_button_child_PaddingLeft0.5rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingRightc_dropdown__toggle_m_split_button_child_PaddingRight0.5rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingTopc_dropdown__toggle_m_split_button_child_PaddingTop0.375rem
--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeftc_dropdown__toggle_m_split_button_first_child_PaddingLeft0.5rem
--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRightc_dropdown__toggle_m_split_button_last_child_PaddingRight0.5rem
--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColorc_dropdown_m_expanded__toggle_m_primary_BackgroundColor#004080
--pf-c-dropdown--m-top__menu--Topc_dropdown_m_top__menu_Top0
--pf-c-dropdown--m-top__menu--Transformc_dropdown_m_top__menu_TransformtranslateY(calc(-100% - 0.25rem))
--pf-c-dropdown--m-top--m-expanded__toggle-icon--Transformc_dropdown_m_top_m_expanded__toggle_icon_Transformrotate(180deg)