Skip to Content
Patternfly Logo

Options menu

An options menu is similar to a dropdown, but provides a way to select among a set of optional settings rather than trigger an action.

ExamplesDocumentationCSS Variables

Examples

Single option

Disabled

Multiple options

Plain

Align top

Align right

Plain with text

Custom text
Custom text
Custom text

With groups

Group 1

Group 2

With groups and dividers between groups


Group 1


Group 2

With groups and dividers between items

Group 1

Group 2

Documentation

Accessibility

This section to be updated once the React implementation is complete.

AttributeApplied toOutcome
role or ariapf-c-options-menuaccessibility notes.
disabled.pf-c-options-menu__toggle, .pf-c-options-menu__toggle-buttonDisables the options menu toggle and toggle button and removes it from keyboard focus.

Note: The attribute aria-selected="true" should be set programmatically to the selected item(s).

Usage

ClassApplied toOutcome
.pf-c-options-menu<div>Initiates a custom options menu.
.pf-c-options-menu__toggle<button>Initiates a custom toggle.
.pf-c-options-menu__toggle-text<span>Initiates a wrapper for toggle text.
.pf-c-options-menu__toggle-icon<i>Initiates the up/down arrow beside toggle text.
.pf-c-options-menu__toggle-button<button>Initiates a custom toggle button for use when .pf-c-options-menu__toggle is a <div> or non-interactive element.
.pf-c-options-menu__menu<ul>Initiates the custom options-menu menu.
.pf-c-options-menu__menu-item<li>Initiates the items in the custom options-menu menu.
.pf-c-options-menu__menu-item-icon<i>Initiates the icon to indicate selected menu items.
.pf-c-options-menu__group<section>Defines a group of items in an options menu. Required when there is more than one group in an options menu.
.pf-c-options-menu__group-title<h1>Defines the title for a group of items in an options menu.
.pf-m-top.pf-c-options-menuModifies to display the menu above the toggle.
.pf-m-align-right.pf-c-options-menu__menuModifies to display the menu aligned to the right edge of the toggle
.pf-m-expanded.pf-c-options-menuModifies for the expanded state.
.pf-m-plain.pf-c-options-menu__toggleModifies to display the toggle with no border.
.pf-m-disabled.pf-c-options-menu__toggleModifies to display the options menu toggle as disabled. This applies to pf-c-options-menu__toggle and should not be used in lieu of the disabled attribute on pf-c-options-menu__toggle. When this is used, disabled should also be added to any form elements in .pf-c-options-menu__toggle
.pf-m-text.pf-c-options-menu__toggleFor use when the .pf-c-options-menu__toggle is a <div> or some non-interactive elment, and you're using a custom .pf-c-options-menu__toggle-button to toggle the options menu.
.pf-m-active.pf-c-options-menu__toggleForces display of the active state of the toggle.
.pf-m-selected.pf-c-options-menu__menu-itemModifies the menu item for the selected state.

CSS Variables

.pf-c-options-menu--pf-c-options-menu__toggle--BackgroundColorc_options_menu__toggle_BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingTopc_options_menu__toggle_PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingRightc_options_menu__toggle_PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingBottomc_options_menu__toggle_PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingLeftc_options_menu__toggle_PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--MinWidthc_options_menu__toggle_MinWidth
44px
.pf-c-options-menu--pf-c-options-menu__toggle--LineHeightc_options_menu__toggle_LineHeight
1.5
.pf-c-options-menu--pf-c-options-menu__toggle--BorderWidthc_options_menu__toggle_BorderWidth
1px
.pf-c-options-menu--pf-c-options-menu__toggle--BorderTopColorc_options_menu__toggle_BorderTopColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--BorderRightColorc_options_menu__toggle_BorderRightColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#8a8d90
.pf-c-options-menu--pf-c-options-menu__toggle--BorderLeftColorc_options_menu__toggle_BorderLeftColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--Colorc_options_menu__toggle_Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--hover--BorderBottomColorc_options_menu__toggle_hover_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomWidthc_options_menu__toggle_active_BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomColorc_options_menu__toggle_active_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomWidthc_options_menu__toggle_focus_BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomColorc_options_menu__toggle_focus_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomWidthc_options_menu__toggle_expanded_BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomColorc_options_menu__toggle_expanded_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--disabled--BackgroundColorc_options_menu__toggle_disabled_BackgroundColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--hover--Colorc_options_menu__toggle_m_plain_hover_Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--disabled--Colorc_options_menu__toggle_m_plain_disabled_Color
#d2d2d2
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginRightc_options_menu__toggle_icon_MarginRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginLeftc_options_menu__toggle_icon_MarginLeft
1rem
.pf-c-options-menu--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotatec_options_menu_m_top_m_expanded__toggle_icon_Rotate
180deg
.pf-c-options-menu--pf-c-options-menu__toggle-button--BackgroundColorc_options_menu__toggle_button_BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingTopc_options_menu__toggle_button_PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingRightc_options_menu__toggle_button_PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingBottomc_options_menu__toggle_button_PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingLeftc_options_menu__toggle_button_PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--BackgroundColorc_options_menu__menu_BackgroundColor
#fff
.pf-c-options-menu--pf-c-options-menu__menu--BoxShadowc_options_menu__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-options-menu--pf-c-options-menu__menu--PaddingTopc_options_menu__menu_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--PaddingBottomc_options_menu__menu_PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--Topc_options_menu__menu_Top
calc(100% + 0.25rem)
.pf-c-options-menu--pf-c-options-menu__menu--ZIndexc_options_menu__menu_ZIndex
200
.pf-c-options-menu--pf-c-options-menu--m-top__menu--Topc_options_menu_m_top__menu_Top
0
.pf-c-options-menu--pf-c-options-menu--m-top__menu--TranslateYc_options_menu_m_top__menu_TranslateY
calc(-100% - 0.25rem)
.pf-c-options-menu--pf-c-options-menu__menu-item--BackgroundColorc_options_menu__menu_item_BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item--Colorc_options_menu__menu_item_Color
#151515
.pf-c-options-menu--pf-c-options-menu__menu-item--FontSizec_options_menu__menu_item_FontSize
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingTopc_options_menu__menu_item_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingRightc_options_menu__menu_item_PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingBottomc_options_menu__menu_item_PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingLeftc_options_menu__menu_item_PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--Colorc_options_menu__menu_item_disabled_Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu__menu-item--hover--BackgroundColorc_options_menu__menu_item_hover_BackgroundColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--BackgroundColorc_options_menu__menu_item_disabled_BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--Colorc_options_menu__menu_item_icon_Color
#06c
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--FontSizec_options_menu__menu_item_icon_FontSize
0.625rem
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--PaddingLeftc_options_menu__menu_item_icon_PaddingLeft
1.5rem
.pf-c-options-menu--pf-c-options-menu__group--group--PaddingTopc_options_menu__group_group_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingTopc_options_menu__group_title_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingRightc_options_menu__group_title_PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingBottomc_options_menu__group_title_PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingLeftc_options_menu__group_title_PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontSizec_options_menu__group_title_FontSize
0.875rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontWeightc_options_menu__group_title_FontWeight
700
.pf-c-options-menu--pf-c-options-menu__group-title--Colorc_options_menu__group_title_Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu--c-divider--MarginTopc_options_menu_c_divider_MarginTop
0.5rem
.pf-c-options-menu--pf-c-options-menu--c-divider--MarginBottomc_options_menu_c_divider_MarginBottom
0.5rem
.pf-c-options-menu .pf-c-divider:last-child--pf-c-options-menu--c-divider--MarginBottomc_options_menu_c_divider_MarginBottom
0
.pf-c-options-menu__toggle:not(.pf-m-plain):hover::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):active::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):focus::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu__toggle.pf-m-plain:hover--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#151515
.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#d2d2d2
.pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain)--pf-c-options-menu__toggle--BackgroundColorc_options_menu__toggle_BackgroundColor
#f0f0f0
.pf-c-options-menu.pf-m-top .pf-c-options-menu__menu--pf-c-options-menu__menu--Topc_options_menu__menu_Top
0