Patternfly Logo

Options menu

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--BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--MinWidth
44px
.pf-c-options-menu--pf-c-options-menu__toggle--LineHeight
1.5
.pf-c-options-menu--pf-c-options-menu__toggle--BorderWidth
1px
.pf-c-options-menu--pf-c-options-menu__toggle--BorderTopColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--BorderRightColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--BorderBottomColor
#8a8d90
.pf-c-options-menu--pf-c-options-menu__toggle--BorderLeftColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--hover--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--disabled--BackgroundColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--hover--Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--disabled--Color
#d2d2d2
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginLeft
1rem
.pf-c-options-menu--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate
180deg
.pf-c-options-menu--pf-c-options-menu__toggle-button--BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--BackgroundColor
#fff
.pf-c-options-menu--pf-c-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--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--Top
calc(100% + 0.25rem)
.pf-c-options-menu--pf-c-options-menu__menu--ZIndex
200
.pf-c-options-menu--pf-c-options-menu--m-top__menu--Top
0
.pf-c-options-menu--pf-c-options-menu--m-top__menu--TranslateY
calc(-100% - 0.25rem)
.pf-c-options-menu--pf-c-options-menu__menu-item--BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item--Color
#151515
.pf-c-options-menu--pf-c-options-menu__menu-item--FontSize
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu__menu-item--hover--BackgroundColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--Color
#06c
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--FontSize
0.625rem
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--PaddingLeft
1.5rem
.pf-c-options-menu--pf-c-options-menu__group--group--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontSize
0.875rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontWeight
700
.pf-c-options-menu--pf-c-options-menu__group-title--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu--c-divider--MarginTop
0.5rem
.pf-c-options-menu--pf-c-options-menu--c-divider--MarginBottom
0.5rem
.pf-c-options-menu .pf-c-divider:last-child--pf-c-options-menu--c-divider--MarginBottom
0
.pf-c-options-menu__toggle:not(.pf-m-plain):hover::before--pf-c-options-menu__toggle--BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):active::before--pf-c-options-menu__toggle--BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):focus::before--pf-c-options-menu__toggle--BorderBottomColor
#06c
.pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before--pf-c-options-menu__toggle--BorderBottomColor
#06c
.pf-c-options-menu__toggle.pf-m-plain:hover--pf-c-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--Color
#d2d2d2
.pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain)--pf-c-options-menu__toggle--BackgroundColor
#f0f0f0
.pf-c-options-menu.pf-m-top .pf-c-options-menu__menu--pf-c-options-menu__menu--Top
0

View source on Github