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

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
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
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 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
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
type'button' | 'submit' | 'reset'Type to put on the button

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 | nullnull as boolean | nullFlag to show if the checkbox is checked
checkedboolean | nullnull as boolean | nullAlternate Flag to show if the checkbox is checked
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#72767b
--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#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)