Skip to Content
Patternfly Logo

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)

Split button action

Basic panel

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.ReactNodeNoAnything which can be rendered in a dropdown
classNamestringNoClasses applied to root element of dropdown
dropdownItemsany[]NoArray of DropdownItem nodes that will be rendered in the dropdown Menu list
isOpenbooleanNoFlag to indicate if menu is opened
isPlainbooleanNoDisplay the toggle with no border or background
positionDropdownPosition | 'right' | 'left'NoIndicates where menu will be aligned horizontally
directionDropdownDirection | 'up' | 'down'NoDisplay menu above or below dropdown toggle
isGroupedbooleanNoFlag to indicate if dropdown has groups
toggleReact.ReactElement<any>YesToggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox>
onSelect(event?: React.SyntheticEvent<HTMLDivElement>) => voidNoFunction callback called when user selects item
autoFocusbooleanNoFlag 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
ouiaComponentTypestringNo
DropdownGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullCheckboxes within group
classNamestringNo''Additional classes added to the DropdownGroup control
labelReact.ReactNodeNo''Group label
DropdownItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything which can be rendered as dropdown item
classNamestringNo''Classes applied to root element of dropdown item
listItemClassNamestringNoClass to be applied to list item
componentReact.ReactNodeNo'a'Indicates which component will be used as dropdown item
variant'item' | 'icon'No'item'Variant of the item. The 'icon' variant should use DropdownItemIcon to wrap contained icons or images.
isDisabledbooleanNofalseRender dropdown item as disabled option
isHoveredbooleanNofalseForces display of the hover state of the element
hrefstringNo''Default hyperlink location
tooltipReact.ReactNodeNonullTooltip to display when hovered over the item
tooltipPropsanyNo{}Additional tooltip props forwarded to the Tooltip component
additionalChildReact.ReactNodeNoAdditional node to include alongside item within the <li>
customChildReact.ReactNodeNoCustom item rendering that receives the DropdownContext
DropdownToggle properties
NameTypeRequiredDefaultDescription
idstringNo''HTML ID of dropdown toggle
childrenReact.ReactNodeNonullAnything which can be rendered as dropdown toggle button
classNamestringNo''Classes applied to root element of dropdown toggle button
isOpenbooleanNofalseFlag to indicate if menu is opened
onToggle(isOpen: boolean) => voidNo(_isOpen: boolean) => undefined as anyCallback called when toggle is clicked
parentRefHTMLElementNonullElement which wraps toggle
isFocusedbooleanNofalseForces focus state
isHoveredbooleanNofalseForces hover state
isActivebooleanNofalseForces active state
isPlainbooleanNofalseDisplay the toggle with no border or background
isDisabledbooleanNofalseWhether or not the <div> has a disabled state
isPrimarybooleanNofalseWhether or not the dropdown toggle button should have primary button styling
iconComponentReact.ElementType | nullNoCaretDownIconThe icon to display for the toggle. Defaults to CaretDownIcon. Set to null to not show an icon.
splitButtonItemsReact.ReactNode[]NoElements to display before the toggle button. When included, renders the toggle as a split button.
splitButtonVariant'action' | 'checkbox'No'checkbox'Variant of split button toggle
aria-labelstringNoAccessible label for the dropdown toggle button
ariaHasPopupboolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'listbox' | 'tree'NoAccessibility property to indicate correct has popup
type'button' | 'submit' | 'reset'NoType to put on the button
onEnter(event?: React.MouseEvent<HTMLButtonElement>) => voidNoCallback called when the Enter key is pressed
DropdownToggleCheckbox properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the DropdownToggleCheckbox
isValidbooleanNotrueFlag to show if the checkbox selection is valid or invalid
isDisabledbooleanNofalseFlag to show if the checkbox is disabled
isCheckedboolean | nullNoFlag to show if the checkbox is checked
checkedboolean | nullNoAlternate Flag to show if the checkbox is checked
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyA callback for when the checkbox selection changes
childrenReact.ReactNodeNoElement to be rendered inside the <span>
idstringYesId of the checkbox
aria-labelstringYesAria-label of the checkbox
DropdownToggleAction properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the DropdownToggleAction
isDisabledbooleanNofalseFlag to show if the action button is disabled
onClick(event: React.MouseEvent<HTMLButtonElement>) => voidNo() => {}A callback for when the action button is clicked
childrenReact.ReactNodeNoElement to be rendered inside the <button>
idstringNoId of the action button
aria-labelstringNoAria-label of the action button

CSS Variables

--pf-c-dropdown__c-divider--MarginBottomc_dropdown__c_divider_MarginBottom
0.5rem
--pf-c-dropdown__c-divider--MarginTopc_dropdown__c_divider_MarginTop
0.5rem
--pf-c-dropdown__group--first-child--PaddingTopc_dropdown__group_first_child_PaddingTop
0
--pf-c-dropdown__group--group--PaddingTopc_dropdown__group_group_PaddingTop
0.5rem
--pf-c-dropdown__group--PaddingTopc_dropdown__group_PaddingTop
0.5rem
--pf-c-dropdown__group-title--Colorc_dropdown__group_title_Color
#737679
--pf-c-dropdown__group-title--FontSizec_dropdown__group_title_FontSize
0.875rem
--pf-c-dropdown__group-title--FontWeightc_dropdown__group_title_FontWeight
700
--pf-c-dropdown__group-title--PaddingBottomc_dropdown__group_title_PaddingBottom
0.5rem
--pf-c-dropdown__group-title--PaddingLeftc_dropdown__group_title_PaddingLeft
1rem
--pf-c-dropdown__group-title--PaddingRightc_dropdown__group_title_PaddingRight
1rem
--pf-c-dropdown__group-title--PaddingTopc_dropdown__group_title_PaddingTop
0.5rem
--pf-c-dropdown__menu--BackgroundColorc_dropdown__menu_BackgroundColor
#fff
--pf-c-dropdown__menu--BorderWidthc_dropdown__menu_BorderWidth
1px
--pf-c-dropdown__menu--BoxShadowc_dropdown__menu_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColor
transparent
--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color
#737679
--pf-c-dropdown__menu-item--disabled--BackgroundColorc_dropdown__menu_item_disabled_BackgroundColor
transparent
--pf-c-dropdown__menu-item--disabled--Colorc_dropdown__menu_item_disabled_Color
#737679
--pf-c-dropdown__menu-item--FontSizec_dropdown__menu_item_FontSize
1rem
--pf-c-dropdown__menu-item--FontWeightc_dropdown__menu_item_FontWeight
400
--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__menu-item-icon--Heightc_dropdown__menu_item_icon_Height
1.5rem
--pf-c-dropdown__menu-item-icon--MarginRightc_dropdown__menu_item_icon_MarginRight
0.5rem
--pf-c-dropdown__menu-item-icon--Widthc_dropdown__menu_item_icon_Width
1.5rem
--pf-c-dropdown__menu-item--LineHeightc_dropdown__menu_item_LineHeight
1.5
--pf-c-dropdown__menu-item--PaddingBottomc_dropdown__menu_item_PaddingBottom
0.5rem
--pf-c-dropdown__menu-item--PaddingLeftc_dropdown__menu_item_PaddingLeft
1rem
--pf-c-dropdown__menu-item--PaddingRightc_dropdown__menu_item_PaddingRight
1rem
--pf-c-dropdown__menu-item--PaddingTopc_dropdown__menu_item_PaddingTop
0.5rem
--pf-c-dropdown__menu--PaddingBottomc_dropdown__menu_PaddingBottom
0.5rem
--pf-c-dropdown__menu--PaddingTopc_dropdown__menu_PaddingTop
0.5rem
--pf-c-dropdown__menu--Topc_dropdown__menu_Top
0
--pf-c-dropdown__menu--ZIndexc_dropdown__menu_ZIndex
200
--pf-c-dropdown__separator--BackgroundColorc_dropdown__separator_BackgroundColor
#d2d2d2
--pf-c-dropdown__separator--Heightc_dropdown__separator_Height
1px
--pf-c-dropdown__separator--MarginBottomc_dropdown__separator_MarginBottom
0
--pf-c-dropdown__separator--MarginTopc_dropdown__separator_MarginTop
0.5rem
--pf-c-dropdown__toggle--active--BorderBottomColorc_dropdown__toggle_active_BorderBottomColor
#06c
--pf-c-dropdown__toggle--active--BorderBottomWidthc_dropdown__toggle_active_BorderBottomWidth
2px
--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_BorderWidth
1px
--pf-c-dropdown__toggle-button--Colorc_dropdown__toggle_button_Color
#151515
--pf-c-dropdown__toggle--Colorc_dropdown__toggle_Color
#fff
--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_BorderBottomWidth
2px
--pf-c-dropdown__toggle--focus--BorderBottomColorc_dropdown__toggle_focus_BorderBottomColor
#06c
--pf-c-dropdown__toggle--focus--BorderBottomWidthc_dropdown__toggle_focus_BorderBottomWidth
2px
--pf-c-dropdown__toggle--FontSizec_dropdown__toggle_FontSize
1rem
--pf-c-dropdown__toggle--FontWeightc_dropdown__toggle_FontWeight
400
--pf-c-dropdown__toggle--hover--BorderBottomColorc_dropdown__toggle_hover_BorderBottomColor
#06c
--pf-c-dropdown__toggle-icon--MarginLeftc_dropdown__toggle_icon_MarginLeft
1rem
--pf-c-dropdown__toggle-icon--MarginRightc_dropdown__toggle_icon_MarginRight
0.5rem
--pf-c-dropdown__toggle--LineHeightc_dropdown__toggle_LineHeight
1.5
--pf-c-dropdown__toggle--m-plain--BorderColorc_dropdown__toggle_m_plain_BorderColor
transparent
--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--active--BackgroundColorc_dropdown__toggle_m_primary_active_BackgroundColor
#004080
--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--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_Transform
translateY(-0.0625rem)
--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeftc_dropdown__toggle_m_split_button__toggle_text_MarginLeft
0.5rem
--pf-c-dropdown__toggle--m-split-button--child--BackgroundColorc_dropdown__toggle_m_split_button_child_BackgroundColor
transparent
--pf-c-dropdown__toggle--m-split-button--child--PaddingBottomc_dropdown__toggle_m_split_button_child_PaddingBottom
0.375rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingLeftc_dropdown__toggle_m_split_button_child_PaddingLeft
0.5rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingRightc_dropdown__toggle_m_split_button_child_PaddingRight
0.5rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingTopc_dropdown__toggle_m_split_button_child_PaddingTop
0.375rem
--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeftc_dropdown__toggle_m_split_button_first_child_PaddingLeft
0.5rem
--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRightc_dropdown__toggle_m_split_button_last_child_PaddingRight
0.5rem
--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRightc_dropdown__toggle_m_split_button_m_action__toggle_button_MarginRight
0
--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeftc_dropdown__toggle_m_split_button_m_action_child_PaddingLeft
0.5rem
--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRightc_dropdown__toggle_m_split_button_m_action_child_PaddingRight
0.5rem
--pf-c-dropdown__toggle--MinWidthc_dropdown__toggle_MinWidth
44px
--pf-c-dropdown__toggle--PaddingBottomc_dropdown__toggle_PaddingBottom
0.375rem
--pf-c-dropdown__toggle--PaddingLeftc_dropdown__toggle_PaddingLeft
0.5rem
--pf-c-dropdown__toggle--PaddingRightc_dropdown__toggle_PaddingRight
0.5rem
--pf-c-dropdown__toggle--PaddingTopc_dropdown__toggle_PaddingTop
0.375rem
--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_Top
0
--pf-c-dropdown--m-top__menu--Transformc_dropdown_m_top__menu_Transform
translateY(calc(-100% - 0.25rem))
--pf-c-dropdown--m-top--m-expanded__toggle-icon--Transformc_dropdown_m_top_m_expanded__toggle_icon_Transform
rotate(180deg)