Dropdown
Use a dropdown when you want to present a list of actions in a limited space.
ExamplesDocumentationCSS VariablesExamples
The dropdown panel is provided for flexibility in allowing various content within a dropdown.
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__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-right | .pf-c-dropdown__menu | Modifies to display the menu aligned to the right edge of the toggle. |
.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-primary | .pf-c-dropdown__toggle | Modifies to display the toggle with primary styles. |
.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 toggle so that it follows the active state styling. |
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--BorderWidth | 1px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderTopColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderRightColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderBottomColor | #8a8d90 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderLeftColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--hover--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--active--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--active--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--expanded--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--expanded--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--BorderColor | transparent | ||
| .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-primary--Color | #fff | ||
| .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--Transform | 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--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--Transform | 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--Transform | 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__group--PaddingTop | 0 | ||
| .pf-c-dropdown | --pf-c-dropdown__group--group--PaddingTop | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group--first-child--PaddingTop | 0 | ||
| .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 | 500 | ||
| .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--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):active::before | --pf-c-dropdown__toggle--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):focus::before | --pf-c-dropdown__toggle--BorderBottomColor | #06c | ||
| .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before | --pf-c-dropdown__toggle--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 | ||
| .pf-c-dropdown__group:first-child | --pf-c-dropdown__group--PaddingTop | 0 | ||
| .pf-c-dropdown__group + .pf-c-dropdown__group | --pf-c-dropdown__group--PaddingTop | 0.5rem | ||
