HTML

ExamplesDocumentationCSS variables

Examples

Copied to clipboard
Copied to clipboard
Copied to clipboard

Kebab

Copied to clipboard

Kebab align right

Copied to clipboard

Align right

Copied to clipboard

Top

Copied to clipboard

Split button

Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard

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.
role="separator" .pf-c-dropdown__separator Indicates that the separator is a separator.
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 <i> 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 a button in the toggle area of 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 <button> Defines a menu item that performs an action on the current page.
.pf-c-dropdown__separator <div> Defines a separator within the menu.
.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-hover .pf-c-dropdown__menu-item, .pf-c-dropdown__toggle Forces display of the hover state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.
.pf-m-focus .pf-c-dropdown__menu-item, .pf-c-dropdown__toggle Forces display of the focus state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :focus pseudo-class.
.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-active .pf-c-dropdown__toggle Forces display of the active state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :active pseudo-class.
.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.

CSS variables

--pf-c-dropdown__c-divider--MarginBottomc_dropdown__c_divider_MarginBottom0.5rem
--pf-c-dropdown__c-divider--MarginTopc_dropdown__c_divider_MarginTop0.5rem
--pf-c-dropdown__group--PaddingTopc_dropdown__group_PaddingTop0.5rem
--pf-c-dropdown__group--first-child--PaddingTopc_dropdown__group_first_child_PaddingTop0.5rem
--pf-c-dropdown__group-title--Colorc_dropdown__group_title_Color#737679
--pf-c-dropdown__group-title--FontSizec_dropdown__group_title_FontSize0.875rem
--pf-c-dropdown__group-title--FontWeightc_dropdown__group_title_FontWeight700
--pf-c-dropdown__group-title--PaddingBottomc_dropdown__group_title_PaddingBottom0.5rem
--pf-c-dropdown__group-title--PaddingLeftc_dropdown__group_title_PaddingLeft1rem
--pf-c-dropdown__group-title--PaddingRightc_dropdown__group_title_PaddingRight1rem
--pf-c-dropdown__menu--BackgroundColorc_dropdown__menu_BackgroundColor#fff
--pf-c-dropdown__menu--BorderWidthc_dropdown__menu_BorderWidth1px
--pf-c-dropdown__menu--BoxShadowc_dropdown__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-dropdown__menu--PaddingBottomc_dropdown__menu_PaddingBottom0.5rem
--pf-c-dropdown__menu--PaddingTopc_dropdown__menu_PaddingTop0.5rem
--pf-c-dropdown__menu--Topc_dropdown__menu_Top0
--pf-c-dropdown__menu--ZIndexc_dropdown__menu_ZIndex200
--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColortransparent
--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color#737679
--pf-c-dropdown__menu-item--FontSizec_dropdown__menu_item_FontSize1rem
--pf-c-dropdown__menu-item--FontWeightc_dropdown__menu_item_FontWeight400
--pf-c-dropdown__menu-item--LineHeightc_dropdown__menu_item_LineHeight1.5
--pf-c-dropdown__menu-item--PaddingBottomc_dropdown__menu_item_PaddingBottom0.5rem
--pf-c-dropdown__menu-item--PaddingLeftc_dropdown__menu_item_PaddingLeft1rem
--pf-c-dropdown__menu-item--PaddingRightc_dropdown__menu_item_PaddingRight1rem
--pf-c-dropdown__menu-item--PaddingTopc_dropdown__menu_item_PaddingTop0.5rem
--pf-c-dropdown__menu-item--disabled--BackgroundColorc_dropdown__menu_item_disabled_BackgroundColortransparent
--pf-c-dropdown__menu-item--disabled--Colorc_dropdown__menu_item_disabled_Color#737679
--pf-c-dropdown__menu-item--hover--BackgroundColorc_dropdown__menu_item_hover_BackgroundColor#ededed
--pf-c-dropdown__menu-item--hover--Colorc_dropdown__menu_item_hover_Color#151515
--pf-c-dropdown__separator--BackgroundColorc_dropdown__separator_BackgroundColor#d2d2d2
--pf-c-dropdown__separator--Heightc_dropdown__separator_Height1px
--pf-c-dropdown__separator--MarginBottomc_dropdown__separator_MarginBottom0.5rem
--pf-c-dropdown__separator--MarginTopc_dropdown__separator_MarginTop0.5rem
--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor#004080
--pf-c-dropdown__toggle--BorderBottomColorc_dropdown__toggle_BorderBottomColor#06c
--pf-c-dropdown__toggle--BorderLeftColorc_dropdown__toggle_BorderLeftColor#ededed
--pf-c-dropdown__toggle--BorderRightColorc_dropdown__toggle_BorderRightColor#ededed
--pf-c-dropdown__toggle--BorderTopColorc_dropdown__toggle_BorderTopColor#ededed
--pf-c-dropdown__toggle--BorderWidthc_dropdown__toggle_BorderWidth1px
--pf-c-dropdown__toggle--Colorc_dropdown__toggle_Color#fff
--pf-c-dropdown__toggle--FontSizec_dropdown__toggle_FontSize1rem
--pf-c-dropdown__toggle--FontWeightc_dropdown__toggle_FontWeight400
--pf-c-dropdown__toggle--LineHeightc_dropdown__toggle_LineHeight1.5
--pf-c-dropdown__toggle--MinWidthc_dropdown__toggle_MinWidth44px
--pf-c-dropdown__toggle--PaddingBottomc_dropdown__toggle_PaddingBottom0.375rem
--pf-c-dropdown__toggle--PaddingLeftc_dropdown__toggle_PaddingLeft0.5rem
--pf-c-dropdown__toggle--PaddingRightc_dropdown__toggle_PaddingRight0.5rem
--pf-c-dropdown__toggle--PaddingTopc_dropdown__toggle_PaddingTop0.375rem
--pf-c-dropdown__toggle--active--BorderBottomColorc_dropdown__toggle_active_BorderBottomColor#06c
--pf-c-dropdown__toggle--active--BorderBottomWidthc_dropdown__toggle_active_BorderBottomWidth2px
--pf-c-dropdown__toggle-button--Colorc_dropdown__toggle_button_Color#151515
--pf-c-dropdown__toggle--disabled--BackgroundColorc_dropdown__toggle_disabled_BackgroundColor#ededed
--pf-c-dropdown__toggle--expanded--BorderBottomColorc_dropdown__toggle_expanded_BorderBottomColor#06c
--pf-c-dropdown__toggle--expanded--BorderBottomWidthc_dropdown__toggle_expanded_BorderBottomWidth2px
--pf-c-dropdown__toggle--focus--BorderBottomColorc_dropdown__toggle_focus_BorderBottomColor#06c
--pf-c-dropdown__toggle--focus--BorderBottomWidthc_dropdown__toggle_focus_BorderBottomWidth2px
--pf-c-dropdown__toggle--hover--BorderBottomColorc_dropdown__toggle_hover_BorderBottomColor#06c
--pf-c-dropdown__toggle-icon--MarginLeftc_dropdown__toggle_icon_MarginLeft1rem
--pf-c-dropdown__toggle-icon--MarginRightc_dropdown__toggle_icon_MarginRight0.5rem
--pf-c-dropdown__toggle--m-plain--BorderColorc_dropdown__toggle_m_plain_BorderColortransparent
--pf-c-dropdown__toggle--m-plain--Colorc_dropdown__toggle_m_plain_Color#d2d2d2
--pf-c-dropdown__toggle--m-plain--disabled--Colorc_dropdown__toggle_m_plain_disabled_Color#d2d2d2
--pf-c-dropdown__toggle--m-plain--hover--Colorc_dropdown__toggle_m_plain_hover_Color#151515
--pf-c-dropdown__toggle--m-primary--BackgroundColorc_dropdown__toggle_m_primary_BackgroundColor#06c
--pf-c-dropdown__toggle--m-primary--Colorc_dropdown__toggle_m_primary_Color#fff
--pf-c-dropdown__toggle--m-primary--active--BackgroundColorc_dropdown__toggle_m_primary_active_BackgroundColor#004080
--pf-c-dropdown__toggle--m-primary--focus--BackgroundColorc_dropdown__toggle_m_primary_focus_BackgroundColor#004080
--pf-c-dropdown__toggle--m-primary--hover--BackgroundColorc_dropdown__toggle_m_primary_hover_BackgroundColor#004080
--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Transformc_dropdown__toggle_m_split_button__toggle_check__input_TransformtranslateY(-0.0625rem)
--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeftc_dropdown__toggle_m_split_button__toggle_text_MarginLeft0.5rem
--pf-c-dropdown__toggle--m-split-button--child--BackgroundColorc_dropdown__toggle_m_split_button_child_BackgroundColortransparent
--pf-c-dropdown__toggle--m-split-button--child--PaddingBottomc_dropdown__toggle_m_split_button_child_PaddingBottom0.375rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingLeftc_dropdown__toggle_m_split_button_child_PaddingLeft0.5rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingRightc_dropdown__toggle_m_split_button_child_PaddingRight0.5rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingTopc_dropdown__toggle_m_split_button_child_PaddingTop0.375rem
--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeftc_dropdown__toggle_m_split_button_first_child_PaddingLeft0.5rem
--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRightc_dropdown__toggle_m_split_button_last_child_PaddingRight0.5rem
--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColorc_dropdown_m_expanded__toggle_m_primary_BackgroundColor#004080
--pf-c-dropdown--m-top__menu--Topc_dropdown_m_top__menu_Top0
--pf-c-dropdown--m-top__menu--Transformc_dropdown_m_top__menu_TransformtranslateY(calc(-100% - 0.25rem))
--pf-c-dropdown--m-top--m-expanded__toggle-icon--Transformc_dropdown_m_top_m_expanded__toggle_icon_Transformrotate(180deg)