PatternFly

Options menu

Deprecated
Demo

An options menu is similar to a dropdown, but provides a way to select among a set of optional settings rather than trigger an action.

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

Examples

Single option

Disabled

Multiple options

Plain

Align top

Align right

Plain with text

With groups

With groups and dividers between groups

With groups and dividers between items

Documentation

Accessibility

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

Attribute
Applied to
Outcome
role or aria
pf-v5-c-options-menu
accessibility notes.
disabled
.pf-v5-c-options-menu__toggle, .pf-v5-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-v5-c-options-menu
<div>
Initiates a custom options menu.
.pf-v5-c-options-menu__toggle
<button>
Initiates a custom toggle.
.pf-v5-c-options-menu__toggle-text
<span>
Initiates a wrapper for toggle text.
.pf-v5-c-options-menu__toggle-icon
<i>
Initiates the up/down arrow beside toggle text.
.pf-v5-c-options-menu__toggle-button
<button>
Initiates a custom toggle button for use when .pf-v5-c-options-menu__toggle is a <div> or non-interactive element.
.pf-v5-c-options-menu__menu
<ul>
Initiates the custom options-menu menu.
.pf-v5-c-options-menu__menu-item
<li>
Initiates the items in the custom options-menu menu.
.pf-v5-c-options-menu__menu-item-icon
<i>
Initiates the icon to indicate selected menu items.
.pf-v5-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-v5-c-options-menu__group-title
<h1>
Defines the title for a group of items in an options menu.
.pf-m-top
.pf-v5-c-options-menu
Modifies to display the menu above the toggle.
.pf-m-align-right
.pf-v5-c-options-menu__menu
Modifies to display the menu aligned to the right edge of the toggle
.pf-m-expanded
.pf-v5-c-options-menu
Modifies for the expanded state.
.pf-m-static
.pf-v5-c-options-menu__menu
Modifies the menu to be statically positioned to support custom positioning.
.pf-m-plain
.pf-v5-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-v5-c-options-menu__toggle
Modifies to display the options menu toggle as disabled. This applies to pf-v5-c-options-menu__toggle and should not be used in lieu of the disabled attribute on pf-v5-c-options-menu__toggle. When this is used, disabled should also be added to any form elements in .pf-v5-c-options-menu__toggle
.pf-m-text
.pf-v5-c-options-menu__toggle
For use when the .pf-v5-c-options-menu__toggle is a <div> or some non-interactive elment, and you're using a custom .pf-v5-c-options-menu__toggle-button to toggle the options menu.
.pf-m-active
.pf-v5-c-options-menu__toggle
Forces display of the active state of the toggle.
.pf-m-selected
.pf-v5-c-options-menu__menu-item
Modifies the menu item for the selected state.

CSS variables

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

View source on GitHub