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 separators between groups


Group 1


Group 2

With groups and separators 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). | role="separator" | li.pf-c-options-menu__separator | Indicates that the list item is a separator. |

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__separator<li>, <hr>Defines a separator within the menu. Can be used between items (<li>) or between groups (<hr>). There are no visual differences between the types of elements used as a separator. The different elements allowed are only to support valid markup depending on where you place the separator.
.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-hover.pf-c-options-menu__toggleModifies for the hover state.
.pf-m-active.pf-c-options-menu__toggleModifies for the active state.
.pf-m-focus.pf-c-options-menu__toggleModifies for the focus 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.

CSS Variables

--pf-c-options-menu__c-divider--MarginBottomc_options_menu__c_divider_MarginBottom
0.5rem
--pf-c-options-menu__c-divider--MarginTopc_options_menu__c_divider_MarginTop
0.5rem
--pf-c-options-menu__group--group--PaddingTopc_options_menu__group_group_PaddingTop
0.5rem
--pf-c-options-menu__group-title--Colorc_options_menu__group_title_Color
#737679
--pf-c-options-menu__group-title--FontSizec_options_menu__group_title_FontSize
0.875rem
--pf-c-options-menu__group-title--FontWeightc_options_menu__group_title_FontWeight
700
--pf-c-options-menu__group-title--PaddingBottomc_options_menu__group_title_PaddingBottom
0.5rem
--pf-c-options-menu__group-title--PaddingLeftc_options_menu__group_title_PaddingLeft
1rem
--pf-c-options-menu__group-title--PaddingRightc_options_menu__group_title_PaddingRight
1rem
--pf-c-options-menu__group-title--PaddingTopc_options_menu__group_title_PaddingTop
0.5rem
--pf-c-options-menu__menu--BackgroundColorc_options_menu__menu_BackgroundColor
#fff
--pf-c-options-menu__menu--BorderWidthc_options_menu__menu_BorderWidth
1px
--pf-c-options-menu__menu--BoxShadowc_options_menu__menu_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-c-options-menu__menu-item--Backgroundc_options_menu__menu_item_Background
transparent
--pf-c-options-menu__menu-item--disabled--BackgroundColorc_options_menu__menu_item_disabled_BackgroundColor
transparent
--pf-c-options-menu__menu-item--disabled--Colorc_options_menu__menu_item_disabled_Color
#737679
--pf-c-options-menu__menu-item--FontSizec_options_menu__menu_item_FontSize
1rem
--pf-c-options-menu__menu-item--hover--BackgroundColorc_options_menu__menu_item_hover_BackgroundColor
#ededed
--pf-c-options-menu__menu-item-icon--Colorc_options_menu__menu_item_icon_Color
#06c
--pf-c-options-menu__menu-item-icon--FontSizec_options_menu__menu_item_icon_FontSize
0.625rem
--pf-c-options-menu__menu-item-icon--PaddingLeftc_options_menu__menu_item_icon_PaddingLeft
1.5rem
--pf-c-options-menu__menu-item--PaddingBottomc_options_menu__menu_item_PaddingBottom
0.5rem
--pf-c-options-menu__menu-item--PaddingLeftc_options_menu__menu_item_PaddingLeft
1rem
--pf-c-options-menu__menu-item--PaddingRightc_options_menu__menu_item_PaddingRight
1rem
--pf-c-options-menu__menu-item--PaddingTopc_options_menu__menu_item_PaddingTop
0.5rem
--pf-c-options-menu__menu--PaddingBottomc_options_menu__menu_PaddingBottom
0.5rem
--pf-c-options-menu__menu--PaddingTopc_options_menu__menu_PaddingTop
0.5rem
--pf-c-options-menu__menu--Topc_options_menu__menu_Top
0
--pf-c-options-menu__menu--ZIndexc_options_menu__menu_ZIndex
200
--pf-c-options-menu__separator--BackgroundColorc_options_menu__separator_BackgroundColor
#d2d2d2
--pf-c-options-menu__separator--Heightc_options_menu__separator_Height
1px
--pf-c-options-menu__separator--MarginBottomc_options_menu__separator_MarginBottom
0
--pf-c-options-menu__separator--MarginTopc_options_menu__separator_MarginTop
0.5rem
--pf-c-options-menu__toggle--active--BorderBottomColorc_options_menu__toggle_active_BorderBottomColor
#06c
--pf-c-options-menu__toggle--active--BorderBottomWidthc_options_menu__toggle_active_BorderBottomWidth
2px
--pf-c-options-menu__toggle--Backgroundc_options_menu__toggle_Background
#ededed
--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
--pf-c-options-menu__toggle--BorderLeftColorc_options_menu__toggle_BorderLeftColor
#ededed
--pf-c-options-menu__toggle--BorderRightColorc_options_menu__toggle_BorderRightColor
#ededed
--pf-c-options-menu__toggle--BorderTopColorc_options_menu__toggle_BorderTopColor
#ededed
--pf-c-options-menu__toggle--BorderWidthc_options_menu__toggle_BorderWidth
1px
--pf-c-options-menu__toggle-button--Backgroundc_options_menu__toggle_button_Background
transparent
--pf-c-options-menu__toggle-button--PaddingBottomc_options_menu__toggle_button_PaddingBottom
0.375rem
--pf-c-options-menu__toggle-button--PaddingLeftc_options_menu__toggle_button_PaddingLeft
0.5rem
--pf-c-options-menu__toggle-button--PaddingRightc_options_menu__toggle_button_PaddingRight
0.5rem
--pf-c-options-menu__toggle-button--PaddingTopc_options_menu__toggle_button_PaddingTop
0.375rem
--pf-c-options-menu__toggle--Colorc_options_menu__toggle_Color
#151515
--pf-c-options-menu__toggle--disabled--BackgroundColorc_options_menu__toggle_disabled_BackgroundColor
#ededed
--pf-c-options-menu__toggle--expanded--BorderBottomColorc_options_menu__toggle_expanded_BorderBottomColor
#06c
--pf-c-options-menu__toggle--expanded--BorderBottomWidthc_options_menu__toggle_expanded_BorderBottomWidth
2px
--pf-c-options-menu__toggle--focus--BorderBottomColorc_options_menu__toggle_focus_BorderBottomColor
#06c
--pf-c-options-menu__toggle--focus--BorderBottomWidthc_options_menu__toggle_focus_BorderBottomWidth
2px
--pf-c-options-menu__toggle--hover--BorderBottomColorc_options_menu__toggle_hover_BorderBottomColor
#06c
--pf-c-options-menu__toggle-icon--MarginLeftc_options_menu__toggle_icon_MarginLeft
1rem
--pf-c-options-menu__toggle-icon--MarginRightc_options_menu__toggle_icon_MarginRight
0.5rem
--pf-c-options-menu__toggle--LineHeightc_options_menu__toggle_LineHeight
1.5
--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#d2d2d2
--pf-c-options-menu__toggle--m-plain--disabled--Colorc_options_menu__toggle_m_plain_disabled_Color
#d2d2d2
--pf-c-options-menu__toggle--m-plain--hover--Colorc_options_menu__toggle_m_plain_hover_Color
#151515
--pf-c-options-menu__toggle--MinWidthc_options_menu__toggle_MinWidth
44px
--pf-c-options-menu__toggle--PaddingBottomc_options_menu__toggle_PaddingBottom
0.375rem
--pf-c-options-menu__toggle--PaddingLeftc_options_menu__toggle_PaddingLeft
0.5rem
--pf-c-options-menu__toggle--PaddingRightc_options_menu__toggle_PaddingRight
0.5rem
--pf-c-options-menu__toggle--PaddingTopc_options_menu__toggle_PaddingTop
0.375rem
--pf-c-options-menu--m-top__menu--Topc_options_menu_m_top__menu_Top
0
--pf-c-options-menu--m-top__menu--Transformc_options_menu_m_top__menu_Transform
translateY(calc(-100% - 0.25rem))
--pf-c-options-menu--m-top--m-expanded__toggle-icon--Transformc_options_menu_m_top_m_expanded__toggle_icon_Transform
rotate(180deg)