Skip to Content
Patternfly Logo

Dropdown

Use a dropdown when you want to present a list of actions in a limited space.

ExamplesDocumentationCSS Variables

Examples

Expanded

Collapsed

Disabled

Kebab

Kebab align right

Align right

Align top

Split button (checkbox)

Split button (checkbox with toggle text)

Split button (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

 
  • 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

AttributeAppliedOutcome
aria-expanded="false".pf-c-dropdown__toggle, .pf-c-dropdown__toggle-check, .pf-c-dropdown__toggle-buttonIndicates that the menu is hidden.
aria-expanded="true".pf-c-dropdown__toggle, .pf-c-dropdown__toggle-check, .pf-c-dropdown__toggle-buttonIndicates that the menu is visible.
aria-label="Actions".pf-c-dropdown__toggle, .pf-c-dropdown__toggle-check, .pf-c-dropdown__toggle-buttonProvides 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-textHides the icon from assistive technologies.
hidden.pf-c-dropdown__menuIndicates 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__menuGives 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.
disabledbutton.pf-c-dropdown__menu-itemWhen 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-itemWhen the menu item uses a link element, indicates that it is unavailable.
tabindex="-1"a.pf-c-dropdown__menu-itemWhen the menu item uses a link element, removes it from keyboard focus.

Usage

ClassAppliedOutcome
.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-dropdownModifies for the expanded state.
.pf-m-top.pf-c-dropdownModifies to display the menu above the toggle.
.pf-m-align-right.pf-c-dropdown__menuModifies to display the menu aligned to the right edge of the toggle.
.pf-m-split-button.pf-c-dropdown__toggleModifies the dropdown toggle area to allow for interactive elements.
.pf-m-action.pf-c-dropdown__toggle.pf-m-split-buttonModifies 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-itemModifies a menu item to be non-interactive text.
.pf-m-plain.pf-c-dropdown__toggleModifies to display the toggle with no border.
.pf-m-primary.pf-c-dropdown__toggleModifies to display the toggle with primary styles.
.pf-m-disableda.pf-c-dropdown__menu-itemModifies 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-disableddiv.pf-c-dropdown__toggleModifies 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-itemModifies an item to support adding an icon.
.pf-m-active.pf-c-dropdown__toggleModifies the dropdown menu toggle for the active state.
.pf-m-description.pf-c-dropdown__menu-itemModifies an item to support adding a description.

CSS Variables

.pf-c-dropdown--pf-c-dropdown__toggle--PaddingTopc_dropdown__toggle_PaddingTop
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--PaddingRightc_dropdown__toggle_PaddingRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--PaddingBottomc_dropdown__toggle_PaddingBottom
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--PaddingLeftc_dropdown__toggle_PaddingLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--MinWidthc_dropdown__toggle_MinWidth
44px
.pf-c-dropdown--pf-c-dropdown__toggle--FontSizec_dropdown__toggle_FontSize
1rem
.pf-c-dropdown--pf-c-dropdown__toggle--FontWeightc_dropdown__toggle_FontWeight
400
.pf-c-dropdown--pf-c-dropdown__toggle--Colorc_dropdown__toggle_Color
#151515
.pf-c-dropdown--pf-c-dropdown__toggle--LineHeightc_dropdown__toggle_LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderWidthc_dropdown__toggle_before_BorderWidth
1px
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderTopColorc_dropdown__toggle_before_BorderTopColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderRightColorc_dropdown__toggle_before_BorderRightColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderBottomColorc_dropdown__toggle_before_BorderBottomColor
#8a8d90
.pf-c-dropdown--pf-c-dropdown__toggle--before--BorderLeftColorc_dropdown__toggle_before_BorderLeftColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--hover--before--BorderBottomColorc_dropdown__toggle_hover_before_BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--active--before--BorderBottomWidthc_dropdown__toggle_active_before_BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--active--before--BorderBottomColorc_dropdown__toggle_active_before_BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--focus--before--BorderBottomWidthc_dropdown__toggle_focus_before_BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown__toggle--focus--before--BorderBottomColorc_dropdown__toggle_focus_before_BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidthc_dropdown_m_expanded__toggle_before_BorderBottomWidth
2px
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColorc_dropdown_m_expanded__toggle_before_BorderBottomColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--disabled--BackgroundColorc_dropdown__toggle_disabled_BackgroundColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--Colorc_dropdown__toggle_m_plain_Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--hover--Colorc_dropdown__toggle_m_plain_hover_Color
#151515
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--disabled--Colorc_dropdown__toggle_m_plain_disabled_Color
#d2d2d2
.pf-c-dropdown--pf-c-dropdown__toggle--m-plain--child--LineHeightc_dropdown__toggle_m_plain_child_LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--Colorc_dropdown__toggle_m_primary_Color
#fff
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--BackgroundColorc_dropdown__toggle_m_primary_BackgroundColor
#06c
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--hover--BackgroundColorc_dropdown__toggle_m_primary_hover_BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--active--BackgroundColorc_dropdown__toggle_m_primary_active_BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle--m-primary--focus--BackgroundColorc_dropdown__toggle_m_primary_focus_BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColorc_dropdown_m_expanded__toggle_m_primary_BackgroundColor
#004080
.pf-c-dropdown--pf-c-dropdown__toggle-button--Colorc_dropdown__toggle_button_Color
#151515
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingTopc_dropdown__toggle_m_split_button_child_PaddingTop
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingRightc_dropdown__toggle_m_split_button_child_PaddingRight
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingBottomc_dropdown__toggle_m_split_button_child_PaddingBottom
0.375rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--PaddingLeftc_dropdown__toggle_m_split_button_child_PaddingLeft
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--child--BackgroundColorc_dropdown__toggle_m_split_button_child_BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeftc_dropdown__toggle_m_split_button_first_child_PaddingLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRightc_dropdown__toggle_m_split_button_last_child_PaddingRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeftc_dropdown__toggle_m_split_button_m_action_child_PaddingLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRightc_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--MarginRightc_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--TranslateYc_dropdown__toggle_m_split_button__toggle_check__input_TranslateY
-0.0625rem
.pf-c-dropdown--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeftc_dropdown__toggle_m_split_button__toggle_text_MarginLeft
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle-icon--LineHeightc_dropdown__toggle_icon_LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__toggle-icon--MarginRightc_dropdown__toggle_icon_MarginRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__toggle-icon--MarginLeftc_dropdown__toggle_icon_MarginLeft
1rem
.pf-c-dropdown--pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotatec_dropdown_m_top_m_expanded__toggle_icon_Rotate
180deg
.pf-c-dropdown--pf-c-dropdown__menu--BackgroundColorc_dropdown__menu_BackgroundColor
#fff
.pf-c-dropdown--pf-c-dropdown__menu--BoxShadowc_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--PaddingTopc_dropdown__menu_PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu--PaddingBottomc_dropdown__menu_PaddingBottom
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu--Topc_dropdown__menu_Top
calc(100% + 0.25rem)
.pf-c-dropdown--pf-c-dropdown__menu--ZIndexc_dropdown__menu_ZIndex
200
.pf-c-dropdown--pf-c-dropdown--m-top__menu--Topc_dropdown_m_top__menu_Top
0
.pf-c-dropdown--pf-c-dropdown--m-top__menu--TranslateYc_dropdown_m_top__menu_TranslateY
calc(-100% - 0.25rem)
.pf-c-dropdown--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingTopc_dropdown__menu_item_PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingRightc_dropdown__menu_item_PaddingRight
1rem
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingBottomc_dropdown__menu_item_PaddingBottom
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item--PaddingLeftc_dropdown__menu_item_PaddingLeft
1rem
.pf-c-dropdown--pf-c-dropdown__menu-item--FontSizec_dropdown__menu_item_FontSize
1rem
.pf-c-dropdown--pf-c-dropdown__menu-item--FontWeightc_dropdown__menu_item_FontWeight
400
.pf-c-dropdown--pf-c-dropdown__menu-item--LineHeightc_dropdown__menu_item_LineHeight
1.5
.pf-c-dropdown--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color
#151515
.pf-c-dropdown--pf-c-dropdown__menu-item--hover--Colorc_dropdown__menu_item_hover_Color
#151515
.pf-c-dropdown--pf-c-dropdown__menu-item--disabled--Colorc_dropdown__menu_item_disabled_Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__menu-item--hover--BackgroundColorc_dropdown__menu_item_hover_BackgroundColor
#f0f0f0
.pf-c-dropdown--pf-c-dropdown__menu-item--disabled--BackgroundColorc_dropdown__menu_item_disabled_BackgroundColor
transparent
.pf-c-dropdown--pf-c-dropdown__menu-item--m-text--Colorc_dropdown__menu_item_m_text_Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__menu-item-icon--MarginRightc_dropdown__menu_item_icon_MarginRight
0.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item-icon--Widthc_dropdown__menu_item_icon_Width
1.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item-icon--Heightc_dropdown__menu_item_icon_Height
1.5rem
.pf-c-dropdown--pf-c-dropdown__menu-item-description--FontSizec_dropdown__menu_item_description_FontSize
0.75rem
.pf-c-dropdown--pf-c-dropdown__menu-item-description--Colorc_dropdown__menu_item_description_Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__group--group--PaddingTopc_dropdown__group_group_PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingTopc_dropdown__group_title_PaddingTop
0.5rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingRightc_dropdown__group_title_PaddingRight
1rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingBottomc_dropdown__group_title_PaddingBottom
0.5rem
.pf-c-dropdown--pf-c-dropdown__group-title--PaddingLeftc_dropdown__group_title_PaddingLeft
1rem
.pf-c-dropdown--pf-c-dropdown__group-title--FontSizec_dropdown__group_title_FontSize
0.875rem
.pf-c-dropdown--pf-c-dropdown__group-title--FontWeightc_dropdown__group_title_FontWeight
700
.pf-c-dropdown--pf-c-dropdown__group-title--Colorc_dropdown__group_title_Color
#6a6e73
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginTopc_dropdown__toggle_image_MarginTop
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginBottomc_dropdown__toggle_image_MarginBottom
0.25rem
.pf-c-dropdown--pf-c-dropdown__toggle-image--MarginRightc_dropdown__toggle_image_MarginRight
0.5rem
.pf-c-dropdown--pf-c-dropdown--c-divider--MarginTopc_dropdown_c_divider_MarginTop
0.5rem
.pf-c-dropdown--pf-c-dropdown--c-divider--MarginBottomc_dropdown_c_divider_MarginBottom
0.5rem
.pf-c-dropdown .pf-c-divider:last-child--pf-c-dropdown--c-divider--MarginBottomc_dropdown_c_divider_MarginBottom
0
.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
#f0f0f0
.pf-c-dropdown__toggle.pf-m-split-button > *:first-child--pf-c-dropdown__toggle--m-split-button--child--PaddingLeftc_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--PaddingRightc_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--PaddingRightc_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--PaddingLeftc_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--MarginRightc_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--before--BorderBottomColorc_dropdown__toggle_before_BorderBottomColor
#06c
.pf-c-dropdown__toggle:not(.pf-m-action):active::before--pf-c-dropdown__toggle--before--BorderBottomColorc_dropdown__toggle_before_BorderBottomColor
#06c
.pf-c-dropdown__toggle:not(.pf-m-action):focus::before--pf-c-dropdown__toggle--before--BorderBottomColorc_dropdown__toggle_before_BorderBottomColor
#06c
.pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before--pf-c-dropdown__toggle--before--BorderBottomColorc_dropdown__toggle_before_BorderBottomColor
#06c
.pf-c-dropdown__toggle.pf-m-plain:hover--pf-c-dropdown__toggle--m-plain--Colorc_dropdown__toggle_m_plain_Color
#151515
.pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled--pf-c-dropdown__toggle--m-plain--Colorc_dropdown__toggle_m_plain_Color
#d2d2d2
.pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle--Colorc_dropdown__toggle_Color
#fff
.pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
#06c
.pf-c-dropdown__toggle.pf-m-primary:hover--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary:active--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
#004080
.pf-c-dropdown__toggle.pf-m-primary:focus--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
#004080
.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary--pf-c-dropdown__toggle--BackgroundColorc_dropdown__toggle_BackgroundColor
#004080
.pf-c-dropdown__toggle-image:last-child--pf-c-dropdown__toggle-image--MarginRightc_dropdown__toggle_image_MarginRight
0
.pf-c-dropdown.pf-m-top .pf-c-dropdown__menu--pf-c-dropdown__menu--Topc_dropdown__menu_Top
0
.pf-c-dropdown__menu-item:hover--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color
#151515
.pf-c-dropdown__menu-item:hover--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColor
#f0f0f0
.pf-c-dropdown__menu-item:disabled--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color
#6a6e73
.pf-c-dropdown__menu-item:disabled--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColor
transparent
.pf-c-dropdown__menu-item.pf-m-text--pf-c-dropdown__menu-item--Colorc_dropdown__menu_item_Color
#6a6e73
.pf-c-dropdown__menu-item.pf-m-text:hover--pf-c-dropdown__menu-item--BackgroundColorc_dropdown__menu_item_BackgroundColor
transparent