HTML

Options menu

ExamplesDocumentationCSS Variables

Examples

Options menu - single option

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

Custom text
Custom 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.
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-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__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_ZIndex100
--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#72767b
--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_Backgroundtransparent
--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--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#151515
--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))