HTML

Options menu

ExamplesDocumentationCSS variables

Examples

Options menu - single option

Copied to clipboard

Options menu - disabled

Copied to clipboard

Options menu - multiple options

Copied to clipboard

Options menu - plain

Copied to clipboard

Options menu - top

Copied to clipboard

Options menu - align right

Copied to clipboard

Options menu - plain with text

Copied to clipboard

Documentation

Accessibility

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

Attribute Applied to Outcome
role or aria pf-c-options-menu accessibility notes.
disabled .pf-c-options-menu__toggle, .pf-c-options-menu__toggle-button Disables 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

Class Applied to Outcome
.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 dropdown menu.
.pf-c-options-menu__menu-item <li> Initiates the items in the custom options-menu dropdown menu.
.pf-c-options-menu__menu-item-icon <i> Initiates the icon to indicate selected menu items.
.pf-c-options-menu__separator <li> Initiates a separator in the menu list.
.pf-m-top .pf-c-options-menu Modifies to display the menu above the toggle.
.pf-m-align-right .pf-c-options-menu__menu Modifies to display the menu aligned to the right edge of the toggle
.pf-m-expanded .pf-c-options-menu Modifies for the expanded state.
.pf-m-hover .pf-c-options-menu__toggle Modifies for the hover state.
.pf-m-active .pf-c-options-menu__toggle Modifies for the active state.
.pf-m-focus .pf-c-options-menu__toggle Modifies for the focus state.
.pf-m-plain .pf-c-options-menu__toggle Modifies to display the toggle with no border.
.pf-m-disabled .pf-c-options-menu__toggle Modifies 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__toggle For 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_MarginBottom0.5rem
--pf-c-options-menu__c-divider--MarginTopc_options_menu__c_divider_MarginTop0.5rem
--pf-c-options-menu__menu--BackgroundColorc_options_menu__menu_BackgroundColor#fff
--pf-c-options-menu__menu--BorderWidthc_options_menu__menu_BorderWidth1px
--pf-c-options-menu__menu--BoxShadowc_options_menu__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-options-menu__menu--PaddingBottomc_options_menu__menu_PaddingBottom0.5rem
--pf-c-options-menu__menu--PaddingTopc_options_menu__menu_PaddingTop0.5rem
--pf-c-options-menu__menu--Topc_options_menu__menu_Top0
--pf-c-options-menu__menu--ZIndexc_options_menu__menu_ZIndex200
--pf-c-options-menu__menu-item--Backgroundc_options_menu__menu_item_Backgroundtransparent
--pf-c-options-menu__menu-item--FontSizec_options_menu__menu_item_FontSize1rem
--pf-c-options-menu__menu-item--PaddingBottomc_options_menu__menu_item_PaddingBottom0.5rem
--pf-c-options-menu__menu-item--PaddingLeftc_options_menu__menu_item_PaddingLeft1rem
--pf-c-options-menu__menu-item--PaddingRightc_options_menu__menu_item_PaddingRight1rem
--pf-c-options-menu__menu-item--PaddingTopc_options_menu__menu_item_PaddingTop0.5rem
--pf-c-options-menu__menu-item--disabled--BackgroundColorc_options_menu__menu_item_disabled_BackgroundColortransparent
--pf-c-options-menu__menu-item--disabled--Colorc_options_menu__menu_item_disabled_Color#737679
--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_FontSize0.625rem
--pf-c-options-menu__menu-item-icon--PaddingLeftc_options_menu__menu_item_icon_PaddingLeft1.5rem
--pf-c-options-menu__separator--BackgroundColorc_options_menu__separator_BackgroundColor#ededed
--pf-c-options-menu__separator--Heightc_options_menu__separator_Height1px
--pf-c-options-menu__separator--MarginBottomc_options_menu__separator_MarginBottom0.5rem
--pf-c-options-menu__separator--MarginTopc_options_menu__separator_MarginTop0.5rem
--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_BorderWidth1px
--pf-c-options-menu__toggle--Colorc_options_menu__toggle_Color#151515
--pf-c-options-menu__toggle--LineHeightc_options_menu__toggle_LineHeight1.5
--pf-c-options-menu__toggle--MinWidthc_options_menu__toggle_MinWidth44px
--pf-c-options-menu__toggle--PaddingBottomc_options_menu__toggle_PaddingBottom0.375rem
--pf-c-options-menu__toggle--PaddingLeftc_options_menu__toggle_PaddingLeft0.5rem
--pf-c-options-menu__toggle--PaddingRightc_options_menu__toggle_PaddingRight0.5rem
--pf-c-options-menu__toggle--PaddingTopc_options_menu__toggle_PaddingTop0.375rem
--pf-c-options-menu__toggle--active--BorderBottomColorc_options_menu__toggle_active_BorderBottomColor#06c
--pf-c-options-menu__toggle--active--BorderBottomWidthc_options_menu__toggle_active_BorderBottomWidth2px
--pf-c-options-menu__toggle-button--Backgroundc_options_menu__toggle_button_Backgroundtransparent
--pf-c-options-menu__toggle-button--PaddingBottomc_options_menu__toggle_button_PaddingBottom0.375rem
--pf-c-options-menu__toggle-button--PaddingLeftc_options_menu__toggle_button_PaddingLeft0.5rem
--pf-c-options-menu__toggle-button--PaddingRightc_options_menu__toggle_button_PaddingRight0.5rem
--pf-c-options-menu__toggle-button--PaddingTopc_options_menu__toggle_button_PaddingTop0.375rem
--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_BorderBottomWidth2px
--pf-c-options-menu__toggle--focus--BorderBottomColorc_options_menu__toggle_focus_BorderBottomColor#06c
--pf-c-options-menu__toggle--focus--BorderBottomWidthc_options_menu__toggle_focus_BorderBottomWidth2px
--pf-c-options-menu__toggle--hover--BorderBottomColorc_options_menu__toggle_hover_BorderBottomColor#06c
--pf-c-options-menu__toggle-icon--MarginLeftc_options_menu__toggle_icon_MarginLeft1rem
--pf-c-options-menu__toggle-icon--MarginRightc_options_menu__toggle_icon_MarginRight0.5rem
--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--m-top__menu--Topc_options_menu_m_top__menu_Top0
--pf-c-options-menu--m-top__menu--Transformc_options_menu_m_top__menu_TransformtranslateY(calc(-100% - 0.25rem))
--pf-c-options-menu--m-top--m-expanded__toggle-icon--Transformc_options_menu_m_top_m_expanded__toggle_icon_Transformrotate(180deg)