Skip to content
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

Custom text

Plain with text disabled

Custom text

Grouped items with titles

Single option with menu on document body

Props

OptionsMenu

*required
NameTypeDefaultDescription
idrequiredstringId of the root element of the options menu
menuItemsrequiredReact.ReactNode[]Array of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list
togglerequiredReact.ReactElementEither an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu
classNamestring''Classes applied to root element of the options menu
direction'up' | 'down'Menu will open up or open down from the options menu toggle
isGroupedbooleanfalseFlag to indicate if menu is groupped
isOpenbooleanFlag to indicate if menu is open
isPlainbooleanFlag to indicate the toggle has no border or background
isTextbooleanfalseFlag to indicate if toggle is textual toggle
menuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''inline'The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
position'right' | 'left'Indicates where menu will be aligned horizontally
zIndexnumber9999z-index of the options menu when menuAppendTo is not inline.

OptionsMenuItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything which can be rendered as an options menu item
classNamestringClasses applied to root element of an options menu item
idstring''Unique id of this options menu item
isDisabledbooleanRender options menu item as disabled option
isSelectedbooleanfalseRender options menu item as selected
onSelect(event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => void() => null as anyCallback for when this options menu item is selected

OptionsMenuSeparator

*required
NameTypeDefaultDescription
componentNo type info'li'

OptionsMenuToggle

*required
NameTypeDefaultDescription
aria-labelstring'Options menu'Provides an accessible name for the button when an icon is used instead of text
hideCaretbooleanfalsehide the toggle caret
isActivebooleanfalseForces display of the active state of the options menu
isDisabledbooleanfalseDisables the options menu toggle
isOpenbooleanfalseFlag to indicate if menu is open
isPlainbooleanfalseFlag to indicate if the button is plain
isSplitButtonbooleanfalse
onToggle( event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>, isOpen: boolean ) => voidCallback for when this options menu is toggled
parentIdstring''Id of the parent options menu component
toggleTemplateReact.ReactNode<React.Fragment />Content to be rendered in the options menu toggle button

OptionsMenuToggleWithText

*required
NameTypeDefaultDescription
toggleTextrequiredReact.ReactNodeContent to be rendered inside the options menu toggle as text or another non-interactive element
aria-haspopupboolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'Indicates that the element has a popup context menu or sub-level menu
aria-labelstring'Options menu'Provides an accessible name for the button when an icon is used instead of text
isActivebooleanfalseForces display of the active state of the options menu button
isDisabledbooleanfalseDisables the options menu toggle
isOpenbooleanfalseFlag to indicate if menu is open
isPlainbooleanfalseFlag to indicate if the button is plain
onEnter(event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<Element>) => voidInner function to indicate open on Enter
onToggle( event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>, isOpen: boolean ) => void() => null as anyCallback for when this options menu is toggled
parentIdstring''Id of the parent options menu component
toggleButtonContentsReact.ReactNodeContent to be rendered inside the options menu toggle button
toggleButtonContentsClassNamestring''Classes to be added to the options menu toggle button
toggleTextClassNamestring''classes to be added to the options menu toggle text

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
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines