Patternfly Logo

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

Append menu document body

Props

Dropdown properties
NameTypeRequiredDefaultDescription
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
childrenReact.ReactNodeNoAnything which can be rendered in a dropdown
classNamestringNoClasses applied to root element of dropdown
directionDropdownDirection | 'up' | 'down'NoDisplay menu above or below dropdown toggle
dropdownItemsany[]NoArray of DropdownItem nodes that will be rendered in the dropdown Menu list
isGroupedbooleanNoFlag to indicate if dropdown has groups
isOpenbooleanNoFlag to indicate if menu is opened
isPlainbooleanNoDisplay the toggle with no border or background
onSelect(event?: React.SyntheticEvent<HTMLDivElement>) => voidNoFunction callback called when user selects item
positionDropdownPosition | 'right' | 'left'NoIndicates where menu will be aligned horizontally
toggleReact.ReactElement<any>YesToggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox>
DropdownGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullCheckboxes within group
classNamestringNo''Additional classes added to the DropdownGroup control
labelReact.ReactNodeNo''Group label
DropdownItem properties
NameTypeRequiredDefaultDescription
additionalChildReact.ReactNodeNoAdditional node to include alongside item within the <li>
autoFocusbooleanNoInitial focus on the item when the menu is opened (Note: Only applicable to one of the items)
childrenReact.ReactNodeNoAnything which can be rendered as dropdown item
classNamestringNoClasses applied to root element of dropdown item
componentReact.ReactNodeNo'a'A ReactElement to render, or a string to use as the component tag. Example: component={<Link to="/components/alert/">Alert</Link>} Example: component="button" If React.isValidElement(component) the className prop will be injected unless styleChildren="false"
customChildReact.ReactNodeNoCustom item rendering that receives the DropdownContext
descriptionReact.ReactNodeNonullA short description of the dropdown item, displayed under the dropdown item content
hrefstringNoDefault hyperlink location
iconReact.ReactNodeNonullAn image to display within the DropdownItem, appearing before any component children
isDisabledbooleanNofalseRender dropdown item as disabled option
isHoveredbooleanNofalseForces display of the hover state of the element
isPlainTextbooleanNofalseRender dropdown item as non-interactive item
listItemClassNamestringNoClass to be applied to list item
styleChildrenbooleanNoWhether to set className on component when React.isValidElement(component)
tabIndexnumber | nullNo-1tabIndex to use, null to unset it
tooltipReact.ReactNodeNoTooltip to display when hovered over the item
tooltipPropsanyNo{}Additional tooltip props forwarded to the Tooltip component
DropdownToggle properties
NameTypeRequiredDefaultDescription
aria-haspopupboolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree'NoAccessibility property to indicate correct has popup
aria-labelstringNoAccessible label for the dropdown toggle button
childrenReact.ReactNodeNonullAnything which can be rendered as dropdown toggle button
classNamestringNo''Classes applied to root element of dropdown toggle button
getMenuRef() => HTMLElementNonullThe menu element
iconReact.ReactNodeNonullAn image to display within the dropdown toggle, appearing before any component children
idstringNo''HTML ID of dropdown toggle
isActivebooleanNofalseForces active state
isDisabledbooleanNofalseWhether or not the <div> has a disabled state
isOpenbooleanNofalseFlag to indicate if menu is opened
isPlainbooleanNofalseDisplay the toggle with no border or background
isPrimarybooleanNofalseWhether or not the dropdown toggle button should have primary button styling
onEnter(event?: React.MouseEvent<HTMLButtonElement>) => voidNoCallback called when the Enter key is pressed
onToggle(isOpen: boolean) => voidNo(_isOpen: boolean) => undefined as anyCallback called when toggle is clicked
parentRefHTMLElementNonullElement which wraps toggle
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
toggleIndicatorReact.ElementType | nullNoCaretDownIconThe icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon.
type'button' | 'submit' | 'reset'NoType to put on the button
DropdownToggleCheckbox properties
NameTypeRequiredDefaultDescription
aria-labelstringYesAria-label of the checkbox
checkedboolean | nullNoAlternate Flag to show if the checkbox is checked
childrenReact.ReactNodeNoElement to be rendered inside the <span>
classNamestringNo''Additional classes added to the DropdownToggleCheckbox
idstringYesId of the checkbox
isCheckedboolean | nullNoFlag to show if the checkbox is checked
isDisabledbooleanNofalseFlag to show if the checkbox is disabled
isValidbooleanNotrueFlag to show if the checkbox selection is valid or invalid
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyA callback for when the checkbox selection changes
DropdownToggleAction properties
NameTypeRequiredDefaultDescription
aria-labelstringNoAria-label of the action button
childrenReact.ReactNodeNoElement to be rendered inside the <button>
classNamestringNo''Additional classes added to the DropdownToggleAction
idstringNoId of the action button
isDisabledbooleanNofalseFlag to show if the action button is disabled
onClick(event: React.MouseEvent<HTMLButtonElement>) => voidNo() => {}A callback for when the action button is clicked

CSS variables

.pf-c-dropdown--pf-c-dropdown__toggle--PaddingTop
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--PaddingRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--PaddingBottom
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--PaddingLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--MinWidth
44px
.pf-c-dropdown--pf-c-dropdown__toggle--FontSize
1rem
.pf-c-dropdown--pf-c-dropdown__toggle--FontWeight
400
.pf-c-dropdown--pf-c-dropdown__toggle--Color
#151515
.pf-c-dropdown--pf-c-dropdown__toggle--LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__toggle--BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderWidth
1px
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderTopColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderRightColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderBottomColor
#8a8d90
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderLeftColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--hover--before--BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--active--before--BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--active--before--BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--focus--before--BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--focus--before--BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--disabled--BackgroundColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--hover--Color
#151515
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--disabled--Color
#d2d2d2
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--child--LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--Color
#fff
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--BorderRadius
3px
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--BackgroundColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--active--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle-button--Color
#151515
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingTop
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingRight
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight
calc(-1 * 1px)
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY
-0.0625rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle-icon--LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__toggle-icon--MarginRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle-icon--MarginLeft
1rem
.pf-c-dropdown--pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate
180deg
.pf-c-dropdown--pf-c-dropdown__menu--BackgroundColor
#fff
.pf-c-dropdown--pf-c-dropdown__menu--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-dropdown--pf-c-dropdown__menu--PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu--PaddingBottom
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu--Top
calc(100% + 0.25rem)
.pf-c-dropdown--pf-c-dropdown__menu--ZIndex
200
.pf-c-dropdown--pf-c-dropdown--m-top__menu--Top
0
.pf-c-dropdown--pf-c-dropdown--m-top__menu--TranslateY
calc(-100% - 0.25rem)
.pf-c-dropdown--pf-c-dropdown__menu-item--BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingRight
1rem
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingBottom
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingLeft
1rem
.pf-c-dropdown--pf-c-dropdown__menu-item--FontSize
1rem
.pf-c-dropdown--pf-c-dropdown__menu-item--FontWeight
400
.pf-c-dropdown--pf-c-dropdown__menu-item--LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__menu-item--Color
#151515
.pf-c-dropdown--pf-c-dropdown__menu-item--hover--Color
#151515
.pf-c-dropdown--pf-c-dropdown__menu-item--disabled--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__menu-item--hover--BackgroundColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__menu-item--disabled--BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__menu-item--m-text--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__menu-item-icon--MarginRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item-icon--Width
1.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item-icon--Height
1.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item-description--FontSize
0.75rem
.pf-c-dropdown--pf-c-dropdown__menu-item-description--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__group--group--PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingRight
1rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingBottom
0.5rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingLeft
1rem
.pf-c-dropdown--pf-c-dropdown__group-title--FontSize
0.875rem
.pf-c-dropdown--pf-c-dropdown__group-title--FontWeight
700
.pf-c-dropdown--pf-c-dropdown__group-title--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginTop
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginBottom
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginRight
0.5rem
.pf-c-dropdown--pf-c-dropdown--c-divider--MarginTop
0.5rem
.pf-c-dropdown--pf-c-dropdown--c-divider--MarginBottom
0.5rem
.pf-c-dropdown .pf-c-divider:last-child--pf-c-dropdown--c-divider--MarginBottom
0
.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)--pf-c-dropdown__toggle--BackgroundColor
#f0f0f0
.pf-c-dropdown__toggle.pf-m-split-button > *:first-child--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft
0.5rem
.pf-c-dropdown__toggle.pf-m-split-button > *:last-child--pf-c-dropdown__toggle--m-split-button--child--PaddingRight
0.5rem
.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action--pf-c-dropdown__toggle--m-split-button--child--PaddingRight
0.5rem
.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft
0.5rem
.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight
0
.pf-c-dropdown__toggle:not(.pf-m-action):hover::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown__toggle:not(.pf-m-action):active::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown__toggle:not(.pf-m-action):focus::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown__toggle.pf-m-plain:hover--pf-c-dropdown__toggle--m-plain--Color
#151515
.pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled--pf-c-dropdown__toggle--m-plain--Color
#d2d2d2
.pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle--Color
#fff
.pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle--BackgroundColor
#06c
.pf-c-dropdown__toggle.pf-m-primary:hover--pf-c-dropdown__toggle--BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary:active--pf-c-dropdown__toggle--BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary:focus--pf-c-dropdown__toggle--BackgroundColor
#004080
.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle--BackgroundColor
#004080
.pf-c-dropdown__toggle-image:last-child--pf-c-dropdown__toggle-image--MarginRight
0
.pf-c-dropdown.pf-m-top .pf-c-dropdown__menu--pf-c-dropdown__menu--Top
0
.pf-c-dropdown__menu-item:hover--pf-c-dropdown__menu-item--Color
#151515
.pf-c-dropdown__menu-item:hover--pf-c-dropdown__menu-item--BackgroundColor
#f0f0f0
.pf-c-dropdown__menu-item:disabled--pf-c-dropdown__menu-item--Color
#6a6e73
.pf-c-dropdown__menu-item:disabled--pf-c-dropdown__menu-item--BackgroundColor
transparent
.pf-c-dropdown__menu-item.pf-m-text--pf-c-dropdown__menu-item--Color
#6a6e73
.pf-c-dropdown__menu-item.pf-m-text:hover--pf-c-dropdown__menu-item--BackgroundColor
transparent

View source on GitHub