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

Split button

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
childrennodenullCheckboxes within group
classNamestring''Additional classes added to the DropdownGroup control
labelnode''Group label

The DropdownItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything which can be rendered as dropdown item
classNamestring''Classes applied to root element of dropdown item
componentcustom'a'Indicates which component will be used as dropdown item
isDisabledboolfalseRender dropdown item as disabled option
isHoveredboolfalseForces display of the hover state of the element
hrefstring''Default hyperlink location
tooltipnodenullTooltip to display when hovered over the item
tooltipPropsany{}Additional tooltip props forwarded to the Tooltip component

The DropdownToggle component accepts the following props.

NameTypeRequiredDefaultDescription
idstring''HTML ID of dropdown toggle
childrennodenullAnything which can be rendered as dropdown toggle button
classNamestring''Classes applied to root element of dropdown toggle button
isOpenboolfalseFlag to indicate if menu is opened
onTogglefuncFunction.prototypeCallback called when toggle is clicked
parentRefanynullElement which wraps toggle
isFocusedboolfalseForces focus state
isHoveredboolfalseForces hover state
isActiveboolfalseForces active state
isPlainboolfalseDisplay the toggle with no border or background
iconComponentfuncCaretDownIconThe icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon.
splitButtonItemsarrayOfElements to display before the toggle button. When included, renders the toggle as a split button.
aria-labelanyAccessible label for the dropdown toggle button

The DropdownToggleCheckbox component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the DropdownToggleCheckbox
isValidbooltrueFlag to show if the checkbox selection is valid or invalid
isDisabledboolfalseFlag to show if the checkbox is disabled
isCheckedboolnullFlag to show if the checkbox is checked
checkedboolnullAlternate Flag to show if the checkbox is checked
onChangefunc() => undefinedA callback for when the checkbox selection changes
idstringId of the checkbox
aria-labelanyAria-label of the checkbox

The DropdownItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything which can be rendered as dropdown item
classNamestring''Classes applied to root element of dropdown item
componentcustom'a'Indicates which component will be used as dropdown item
rolestringnullRole for the item
isDisabledboolfalseRender dropdown item as disabled option
isHoveredboolfalseForces display of the hover state of the element
hrefstring''Default hyperlink location
tooltipnodenullTooltip to display when hovered over the item
tooltipPropsany{}Additional tooltip props forwarded to the Tooltip component
indexnumber-1
contextshape{ keyHandler: Function.prototype, sendRef: Function.prototype }
onClickfuncFunction.prototypeCallback for click event

CSS Variables

--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#72767b
--pf-c-dropdown__group-title--FontSizec_dropdown__group_title_FontSize0.875rem
--pf-c-dropdown__group-title--FontWeightc_dropdown__group_title_FontWeight500
--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#72767b
--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#72767b
--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#ededed
--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#151515
--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-split-button__toggle-check__input--Transformc_dropdown__toggle_m_split_button__toggle_check__input_TransformtranslateY(-0.0625rem)
--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-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)