Skip to content
PatternFly logo

Options menu

Examples

Single option

Disabled

Multiple options

Plain

Align top

Align right

Plain with 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.

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 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-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-static
.pf-c-options-menu__menu
Modifies the menu to be statically positioned to support custom positioning.
.pf-m-plain
.pf-c-options-menu__toggle
Modifies to display the toggle with no border. Note: Can be combined with .pf-m-text to create a normal text 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.
.pf-m-active
.pf-c-options-menu__toggle
Forces display of the active state of the toggle.
.pf-m-selected
.pf-c-options-menu__menu-item
Modifies 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
0
.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--m-plain--PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--PaddingLeft
1rem
.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--m-plain__toggle-icon--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu--m-plain--hover__toggle-icon--Color
#151515
.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.75rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontWeight
400
.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--pf-c-options-menu__toggle-icon--Color
#6a6e73
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text)--pf-c-options-menu__toggle--PaddingRight
1rem
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text)--pf-c-options-menu__toggle--PaddingLeft
1rem
.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:hover--pf-c-options-menu--m-plain__toggle-icon--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
.pf-c-options-menu__menu.pf-m-static--pf-c-options-menu--m-top__menu--TranslateY
0

View source on GitHub