Skip to content
Patternfly Logo

Dropdown

Examples

Basic

With initial selection

With groups

Disabled

Primary toggle

Position right

Alignments on different breakpoints

Direction up

With kebab

With badge

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

*required
NameTypeDefaultDescription
togglerequiredReact.ReactElement<any>Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox>
alignments{ sm?: 'right' | 'left'; md?: 'right' | 'left'; lg?: 'right' | 'left'; xl?: 'right' | 'left'; '2xl'?: 'right' | 'left'; }Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property.
autoFocusbooleanFlag 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.ReactNodeAnything which can be rendered in a dropdown
classNamestringClasses applied to root element of dropdown
contextPropsDropdownContextProps for extreme customization of dropdown
directionDropdownDirection | 'up' | 'down'Display menu above or below dropdown toggle
dropdownItemsany[]Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isFullHeightbooleanFlag indicating that the dropdown should expand to full height
isGroupedbooleanFlag to indicate if dropdown has groups
isOpenbooleanFlag to indicate if menu is opened
isPlainbooleanDisplay the toggle with no border or background
onSelect(event?: React.SyntheticEvent<HTMLDivElement>) => voidFunction callback called when user selects item
positionDropdownPosition | 'right' | 'left'Indicates where menu will be aligned horizontally
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullCheckboxes within group
classNamestring''Additional classes added to the DropdownGroup control
labelReact.ReactNode''Group label
*required
NameTypeDefaultDescription
additionalChildReact.ReactNodeAdditional node to include alongside item within the <li>
autoFocusbooleanInitial focus on the item when the menu is opened (Note: Only applicable to one of the items)
childrenReact.ReactNodeAnything which can be rendered as dropdown item
classNamestringClasses applied to root element of dropdown item
componentReact.ReactNode'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"
componentIDstringID for the component element
customChildReact.ReactNodeCustom item rendering that receives the DropdownContext
descriptionReact.ReactNodenullA short description of the dropdown item, displayed under the dropdown item content
hrefstringDefault hyperlink location
iconReact.ReactNodenullAn image to display within the DropdownItem, appearing before any component children
isAriaDisabledbooleanfalseRender dropdown item as aria-disabled option
isDisabledbooleanfalseRender dropdown item as disabled option
isHoveredbooleanfalseForces display of the hover state of the element
isPlainTextbooleanfalseRender dropdown item as non-interactive item
listItemClassNamestringClass to be applied to list item
styleChildrenbooleanWhether to set className on component when React.isValidElement(component)
tabIndexnumber | null-1tabIndex to use, null to unset it
tooltipReact.ReactNodeTooltip to display when hovered over the item
tooltipPropsany{}Additional tooltip props forwarded to the Tooltip component
*required
NameTypeDefaultDescription
aria-haspopupboolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree'Accessibility property to indicate correct has popup
aria-labelstringAccessible label for the dropdown toggle button
childrenReact.ReactNodenullAnything which can be rendered as dropdown toggle button
classNamestring''Classes applied to root element of dropdown toggle button
getMenuRef() => HTMLElementnullThe menu element
iconReact.ReactNodenullAn image to display within the dropdown toggle, appearing before any component children
idstring''HTML ID of dropdown toggle
isActivebooleanfalseForces active state
isDisabledbooleanfalseWhether or not the <div> has a disabled state
isOpenbooleanfalseFlag to indicate if menu is opened
isPlainbooleanfalseDisplay the toggle with no border or background
isPrimarybooleanfalseWhether or not the dropdown toggle button should have primary button styling
onEnter(event?: React.MouseEvent<HTMLButtonElement>) => voidCallback called when the Enter key is pressed
onToggle(value: boolean, event: any) => void(_isOpen: boolean) => undefined as anyCallback called when toggle is clicked
parentRefHTMLElementnullElement which wraps toggle
splitButtonItemsReact.ReactNode[]Elements to display before the toggle button. When included, renders the toggle as a split button.
splitButtonVariant'action' | 'checkbox''checkbox'Variant of split button toggle
toggleIndicatorReact.ElementType | nullCaretDownIconThe 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'Type to put on the button
*required
NameTypeDefaultDescription
aria-labelrequiredstringAria-label of the checkbox
idrequiredstringId of the checkbox
checkedboolean | nullAlternate Flag to show if the checkbox is checked
childrenReact.ReactNodeElement to be rendered inside the <span>
classNamestring''Additional classes added to the DropdownToggleCheckbox
isCheckedboolean | nullFlag to show if the checkbox is checked
isDisabledbooleanfalseFlag to show if the checkbox is disabled
isValidbooleantrueFlag to show if the checkbox selection is valid or invalid
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyA callback for when the checkbox selection changes
*required
NameTypeDefaultDescription
aria-labelstringAria-label of the action button
childrenReact.ReactNodeElement to be rendered inside the <button>
classNamestring''Additional classes added to the DropdownToggleAction
idstringId of the action button
isDisabledbooleanfalseFlag to show if the action button is disabled
onClick(event: React.MouseEvent<HTMLButtonElement>) => void() => {}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
0
.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--focus--before--BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--focus--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--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--PaddingRight
1rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--PaddingLeft
1rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--child--LineHeight
normal
.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--focus--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--active--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--Color
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--BorderRadius
3px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--before--BorderWidth
1px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--before--BorderColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--active--before--BorderColor
#06c
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor
#06c
.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--m-split-button--m-primary--child--BorderRadius
3px
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth
1px
.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-dropdown__toggle--c-badge__toggle-icon--MarginLeft
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight
0
.pf-c-dropdown--pf-c-dropdown--c-menu--Top
calc(100% + 0.25rem)
.pf-c-dropdown--pf-c-dropdown--c-menu--ZIndex
200
.pf-c-dropdown--pf-c-dropdown--m-top--c-menu--Top
0
.pf-c-dropdown--pf-c-dropdown--m-top--c-menu--TranslateY
calc(-100% - 0.25rem)
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth
0
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth
4px
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth
4px
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth
4px
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth
4px
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--PaddingRight
1.5rem
.pf-c-dropdown--pf-c-dropdown--m-full-height__toggle--PaddingLeft
1.5rem
.pf-c-dropdown .pf-c-divider:last-child--pf-c-dropdown--c-divider--MarginBottom
0
.pf-c-dropdown.pf-m-full-height--pf-c-dropdown__toggle--PaddingRight
1.5rem
.pf-c-dropdown.pf-m-full-height--pf-c-dropdown__toggle--PaddingLeft
1.5rem
.pf-c-dropdown.pf-m-full-height--pf-c-dropdown__toggle--active--before--BorderBottomWidth
4px
.pf-c-dropdown.pf-m-full-height--pf-c-dropdown__toggle--focus--before--BorderBottomWidth
4px
.pf-c-dropdown.pf-m-full-height--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth
4px
.pf-c-dropdown.pf-m-expanded--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.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.pf-m-primary.pf-m-split-button:not(.pf-m-disabled)--pf-c-dropdown__toggle--before--BorderWidth
0
.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled)--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth
0
.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before--pf-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-c-dropdown__toggle.pf-m-plain--pf-c-dropdown__toggle--PaddingRight
1rem
.pf-c-dropdown__toggle.pf-m-plain--pf-c-dropdown__toggle--PaddingLeft
1rem
.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--BackgroundColor
#06c
.pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle-button--Color
#fff
.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled)--pf-c-dropdown__toggle--Color
#fff
.pf-c-dropdown__toggle.pf-m-primary:hover--pf-c-dropdown__toggle--BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary:focus--pf-c-dropdown__toggle--BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary:active--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.pf-m-secondary--pf-c-dropdown__toggle--Color
#06c
.pf-c-dropdown__toggle.pf-m-secondary--pf-c-dropdown__toggle--BackgroundColor
transparent
.pf-c-dropdown__toggle.pf-m-secondary:hover--pf-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary:focus--pf-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary:active--pf-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary--pf-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary--pf-c-dropdown__toggle--m-secondary--before--BorderColor
#06c
.pf-c-dropdown__toggle > .pf-c-badge--pf-c-dropdown__toggle-icon--MarginLeft
0.25rem
.pf-c-dropdown__toggle > .pf-c-badge--pf-c-dropdown__toggle-icon--MarginRight
0
.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.pf-m-top > .pf-c-menu--pf-c-dropdown--c-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