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

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 Dropdown component accepts the following props.

NameTypeRequiredDefaultDescription
childrencustomnullAnything which can be rendered in a dropdown
classNamestring''Classes applied to root element of dropdown
dropdownItemsarray[]Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isOpenboolfalseFlag to indicate if menu is opened
isPlainboolfalseDisplay the toggle with no border or background
positionenumDropdownPosition.leftIndicates where menu will be aligned horizontally
directionenumDropdownDirection.downDisplay menu above or below dropdown toggle
togglenodePlaceholder to use custom toggle elements
onSelectfuncFunction.prototypeFunction callback called when user selects item
anyAdditional props are spread to the container <div>

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
indexnumber-1
contextshape{ keyHandler: Function.prototype, sendRef: Function.prototype }
anyAdditional props are spread to the container component
onClickfuncFunction.prototypeCallback for click event

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
anyAdditional props are spread to the container component

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
onChangefunc() => undefinedA callback for when the checkbox selection changes
idstringId of the checkbox
aria-labelanyAria-label of the checkbox
anyAdditional props are spread to the <input>

Item Props

The Item component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything which can be rendered as dropdown item
classNamestring''Classess 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
anyAdditional props are passed to the DropdownItem

Kebab Props

The Kebab component accepts the following props.

NameTypeRequiredDefaultDescription
idstring''HTML ID of dropdown toggle
childrennodenullAnything which can be rendered as dropdown toggle
classNamestring''Classess applied to root element of dropdown toggle
isOpenboolfalseFlag to indicate if menu is opened
aria-labelstring'Actions'Label Toggle button
onTogglefuncFunction.prototypeCallback called when toggle is clicked
parentRefanynullElement which wraps toggle
isFocusedboolfalseForces focus state
isHoveredboolfalseForces hover state
isActiveboolfalseForces active state
isDisabledboolfalseDisables the dropdown toggle
isPlainboolfalseDisplay the toggle with no border or background
anyAdditional props are spread to the container component

Separator Props

The Separator 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
anyAdditional props are passed to the DropdownItem

Toggle Props

The Toggle component accepts the following props.

NameTypeRequiredDefaultDescription
idstringHTML ID of dropdown toggle
childrennodenullAnything which can be rendered as dropdown toggle
classNamestring''Classes applied to root element of dropdown toggle
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
isDisabledboolfalseDisables the dropdown toggle
isPlainboolfalseDisplay the toggle with no border or background
isSplitButtonboolStyle the toggle as a child of a split button
anyAdditional props are spread to the container <button>

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_ZIndex100
--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))