HTML

Options menu

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__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.5rem
--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)