Skip to content
Patternfly Logo

Dropdown

A dropdown presents a menu of actions or links in a constrained space that will trigger a process or navigate to a new location. See select component guidelines for more information about making one or more selections from a list of items in a value list.

A newer React implementation of the dropdown will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

With kebab toggle

With groups

With descriptions

Props

*required
NameTypeDefaultDescription
togglerequired(toggleRef: React.RefObject<any>) => React.ReactNodeRenderer for a custom dropdown toggle. Forwards a ref to the toggle.
childrenReact.ReactNodeAnything which can be rendered in a dropdown.
classNamestringClasses applied to root element of dropdown.
isOpenbooleanFlag to indicate if menu is opened.
isPlainbooleanIndicates if the menu should be without the outer box-shadow.
isScrollablebooleanIndicates if the menu should be scrollable.
minWidthstringMin width of the menu.
onOpenChange(isOpen: boolean) => voidCallback to allow the dropdown component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing either tab or escape.
onSelect(event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => voidFunction callback called when user selects item.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
zIndexnumberz-index of the dropdown menu
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a dropdown group.
classNamestringClasses applied to root element of dropdown group
labelstringLabel of the dropdown group
labelHeadingLevelNo type info'h1'
*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a dropdown item
classNamestringClasses applied to root element of dropdown item
descriptionReact.ReactNodeDescription of the dropdown item
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a dropdown list
classNamestringClasses applied to root element of dropdown list

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-primary--disabled--Color
#151515
.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--child--BorderRadius
3px
.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--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--Color
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base
1px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
1px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth
2px
.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--m-plain__toggle-icon--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown--m-plain--hover__toggle-icon--Color
#151515
.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.75rem
.pf-c-dropdown--pf-c-dropdown__group-title--FontWeight
400
.pf-c-dropdown--pf-c-dropdown__group-title--Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginTop
0
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginBottom
0
.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.pf-m-expanded--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-disabled--pf-c-dropdown__toggle--m-primary--Color
#151515
.pf-c-dropdown__toggle.pf-m-disabled--pf-c-dropdown__toggle--before--BorderBottomColor
transparent
.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-split-button.pf-m-action.pf-m-primary.pf-m-disabled--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth
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):focus::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-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-icon--Color
#6a6e73
.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)--pf-c-dropdown__toggle--PaddingRight
1rem
.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)--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:hover--pf-c-dropdown--m-plain__toggle-icon--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--pf-c-dropdown__toggle-button--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:not(.pf-m-disabled):not([disabled])--pf-c-dropdown__toggle--Color
#06c
.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])--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-m-secondary.pf-m-split-button:not(.pf-m-disabled)--pf-c-dropdown__toggle-button--Color
#06c
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.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__menu.pf-m-static--pf-c-dropdown--m-top__menu--TranslateY
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