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.

Examples

Expanded

Collapsed

Disabled

Aria disabled items

Kebab

Kebab align right

Align right

Align on different breakpoint

Align top

Plain with text

 
 

Badge toggle

Split button (checkbox)

Split button (checkbox with toggle text)

Split button (action)

Split button, primary (action)

Split button, secondary (action)

With groups

Group 2

Group 3

With groups and dividers between groups

Group 2

Group 3

With groups and dividers between items

Group 2

Group 3

Panel

[Panel contents here]

The dropdown panel is provided for flexibility in allowing various content within a dropdown.

Primary toggle

Secondary toggle

Dropdown with image and text

Text
More text
  • PatternFly logo Link
    This is a description

Documentation

Overview

The dropdown menu can contain either links or buttons, depending on the expected behavior when clicking the menu item. If you are using the menu item to navigate to another page, then menu item is a link. Otherwise, use a button for the menu item.

Accessibility

Attribute
Applied
Outcome
aria-expanded="false"
.pf-c-dropdown__toggle, .pf-c-dropdown__toggle-check, .pf-c-dropdown__toggle-button
Indicates that the menu is hidden.
aria-expanded="true"
.pf-c-dropdown__toggle, .pf-c-dropdown__toggle-check, .pf-c-dropdown__toggle-button
Indicates that the menu is visible.
aria-label="Actions"
.pf-c-dropdown__toggle, .pf-c-dropdown__toggle-check, .pf-c-dropdown__toggle-button
Provides an accessible name for the dropdown when an icon is used instead of text. Required when icon is used with no supporting text.
aria-hidden="true"
.pf-c-dropdown__toggle-icon, <i>, .pf-c-dropdown__toggle-check .pf-c-dropdown__toggle-text
Hides the icon from assistive technologies.
hidden
.pf-c-dropdown__menu
Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
aria-labelledby="{toggle button id}"
.pf-c-dropdown__menu
Gives the menu an accessible name by referring to the element that toggles the menu.
aria-labelledby="{checkbox id} {toggle text id}"
.pf-m-split-button .pf-c-dropdown__toggle-check > input[type="checkbox"]
Gives the checkbox an accessible name by referring to the element by which it is described.
disabled
.pf-c-dropdown__toggle, .pf-c-dropdown__toggle-button, .pf-c-dropdown__toggle-check > input[type="checkbox"]
Disables the dropdown toggle and removes it from keyboard focus.
disabled
button.pf-c-dropdown__menu-item
When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.
aria-disabled="true"
a.pf-c-dropdown__menu-item
When the menu item uses a link element, indicates that it is unavailable.
tabindex="-1"
a.pf-c-dropdown__menu-item
When the menu item uses a link element, removes it from keyboard focus.

Usage

Class
Applied
Outcome
.pf-c-dropdown
<div>
Defines the parent wrapper of the dropdown.
.pf-c-dropdown__toggle
<button>
Defines the dropdown toggle.
.pf-c-dropdown__toggle-icon
<span>
Defines the dropdown toggle icon.
.pf-c-dropdown__toggle-text
<span>
Defines the dropdown toggle text. Required when text is present, adds truncation.
.pf-c-dropdown__toggle-check
<label>
Defines a checkbox in the toggle area of a split button dropdown.
.pf-c-dropdown__toggle-button
<button>
Defines the toggle button for a split button dropdown.
.pf-c-dropdown__menu
<ul>, <div>
Defines the parent wrapper of the menu items.
.pf-c-dropdown__menu-item
<a>
Defines a menu item that navigates to another page.
.pf-c-dropdown__menu-item-icon
<span>
Defines the wrapper for the menu item icon.
.pf-c-dropdown__menu-item-description
<div>
Defines the wrapper for the menu item description.
.pf-c-dropdown__menu-item-main
<div>
Defines the wrapper for the menu item main element. Use when the description element is present.
.pf-c-dropdown__toggle-image
<span>
Defines the wrapper for the dropdown toggle button image.
.pf-c-dropdown__menu-item
<button>
Defines a menu item that performs an action on the current page.
.pf-c-dropdown__group
<section>
Defines a group of items in a dropdown. Required when there is more than one group in a dropdown.
.pf-c-dropdown__group-title
<h1>
Defines the title for a group of items in the dropdown menu.
.pf-m-expanded
.pf-c-dropdown
Modifies for the expanded state.
.pf-m-top
.pf-c-dropdown
Modifies to display the menu above the toggle.
.pf-m-align-left{-on-[breakpoint]}
.pf-c-dropdown__menu
Modifies to display the menu aligned to the left edge of the toggle at optional breakpoint.
.pf-m-align-right{-on-[breakpoint]}
.pf-c-dropdown__menu
Modifies to display the menu aligned to the right edge of the toggle at optional breakpoint.
.pf-m-split-button
.pf-c-dropdown__toggle
Modifies the dropdown toggle area to allow for interactive elements.
.pf-m-action
.pf-c-dropdown__toggle.pf-m-split-button
Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown.
.pf-m-text
.pf-c-dropdown__menu-item
Modifies a menu item to be non-interactive text.
.pf-m-plain
.pf-c-dropdown__toggle
Modifies to display the toggle with no border.
.pf-m-text
.pf-c-dropdown__toggle
Modifies the dropdown toggle for the text variation.
.pf-m-primary
.pf-c-dropdown__toggle
Modifies to display the toggle with primary styles.
.pf-m-secondary
.pf-c-dropdown__toggle
Modifies to display the toggle with secondary styles.
.pf-m-full-height
.pf-c-dropdown
Modifies a dropdown to full height of parent. See masthead for use.
.pf-m-disabled
a.pf-c-dropdown__menu-item
Modifies to display the menu item as disabled. This applies to a.pf-c-dropdown__menu-item and should not be used in lieu of the disabled attribute on button.pf-c-dropdown__menu-item.
.pf-m-disabled
div.pf-c-dropdown__toggle
Modifies to display the dropdown toggle as disabled. This applies to div.pf-c-dropdown__toggle and should not be used in lieu of the disabled attribute on button.pf-c-dropdown__toggle. When this is used, disabled should also be added to any form elements in div.pf-c-dropdown__toggle.
.pf-m-icon
.pf-c-dropdown__menu-item
Modifies an item to support adding an icon.
.pf-m-active
.pf-c-dropdown__toggle
Modifies the dropdown menu toggle for the active state.
.pf-m-description
.pf-c-dropdown__menu-item
Modifies an item to support adding a description.
.pf-m-static
.pf-c-dropdown__menu
Modifies a dropdown menu for popper placement support.

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.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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines