Options menu

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.

Examples

Single option

Disabled

Multiple options

Plain

Align top

Align right

Plain with text

Plain with text disabled

Grouped items with titles

Props

OptionsMenu

*required
Name	Type	Default	Description
idrequired	string		Id of the root element of the options menu
menuItemsrequired	React.ReactNode[]		Array of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list
togglerequired	React.ReactElement		Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu
className	string	''	Classes applied to root element of the options menu
direction	'up' \| 'down'		Menu will open up or open down from the options menu toggle
isGrouped	boolean	false	Flag to indicate if menu is groupped
isOpen	boolean		Flag to indicate if menu is open
isPlain	boolean		Flag to indicate the toggle has no border or background
isText	boolean	false	Flag to indicate if toggle is textual toggle
menuAppendTo	HTMLElement \| (() => 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')}
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set 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
removeFindDomNodeBeta	boolean	false	Opt-in for updated popper that does not use findDOMNode.
zIndex	number	9999	z-index of the options menu when menuAppendTo is not inline.

OptionsMenuItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Anything which can be rendered as an options menu item
className	string		Classes applied to root element of an options menu item
id	string	''	Unique id of this options menu item
isDisabled	boolean		Render options menu item as disabled option
isSelected	boolean	false	Render options menu item as selected
onSelect	(event?: React.MouseEvent<HTMLAnchorElement> \| React.KeyboardEvent) => void	() => null as any	Callback for when this options menu item is selected

OptionsMenuSeparator

*required
Name	Type	Default	Description
component	No type info	'li'

OptionsMenuToggle

*required
Name	Type	Default	Description
aria-label	string	'Options menu'	Provides an accessible name for the button when an icon is used instead of text
hideCaret	boolean	false	hide the toggle caret
isActive	boolean	false	Forces display of the active state of the options menu
isDisabled	boolean	false	Disables the options menu toggle
isOpen	boolean	false	Flag to indicate if menu is open
isPlain	boolean	false	Flag to indicate if the button is plain
isSplitButton	boolean	false
onToggle	(isOpen: boolean) => void		Callback for when this options menu is toggled
parentId	string	''	Id of the parent options menu component
toggleTemplate	React.ReactNode	<React.Fragment />	Content to be rendered in the options menu toggle button

OptionsMenuToggleWithText

*required
Name	Type	Default	Description
toggleTextrequired	React.ReactNode		Content to be rendered inside the options menu toggle as text or another non-interactive element
aria-haspopup	boolean \| 'dialog' \| 'menu' \| 'listbox' \| 'tree' \| 'grid'		Indicates that the element has a popup context menu or sub-level menu
aria-label	string	'Options menu'	Provides an accessible name for the button when an icon is used instead of text
isActive	boolean	false	Forces display of the active state of the options menu button
isDisabled	boolean	false	Disables the options menu toggle
isOpen	boolean	false	Flag to indicate if menu is open
isPlain	boolean	false	Flag to indicate if the button is plain
onEnter	(event: React.MouseEvent<HTMLButtonElement> \| React.KeyboardEvent<Element>) => void		Inner function to indicate open on Enter
onToggle	(event: boolean) => void	() => null as any	Callback for when this options menu is toggled
parentId	string	''	Id of the parent options menu component
toggleButtonContents	React.ReactNode		Content to be rendered inside the options menu toggle button
toggleButtonContentsClassName	string	''	Classes to be added to the options menu toggle button
toggleTextClassName	string	''	classes to be added to the options menu toggle text

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__toggle--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-options-menu	--pf-c-options-menu__toggle--PaddingRight	0.5rem
--pf-c-options-menu__toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__toggle--PaddingBottom	0.375rem
--pf-c-options-menu__toggle--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-options-menu	--pf-c-options-menu__toggle--PaddingLeft	0.5rem
--pf-c-options-menu__toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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__toggle--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-options-menu	--pf-c-options-menu__toggle--BorderWidth	1px
--pf-c-options-menu__toggle--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-options-menu	--pf-c-options-menu__toggle--BorderTopColor	#f0f0f0
--pf-c-options-menu__toggle--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-options-menu	--pf-c-options-menu__toggle--BorderRightColor	#f0f0f0
--pf-c-options-menu__toggle--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-options-menu	--pf-c-options-menu__toggle--BorderBottomColor	#8a8d90
--pf-c-options-menu__toggle--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-options-menu	--pf-c-options-menu__toggle--BorderLeftColor	#f0f0f0
--pf-c-options-menu__toggle--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-options-menu	--pf-c-options-menu__toggle--Color	#151515
--pf-c-options-menu__toggle--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-options-menu	--pf-c-options-menu__toggle--hover--BorderBottomColor	#06c
--pf-c-options-menu__toggle--hover--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu	--pf-c-options-menu__toggle--active--BorderBottomWidth	2px
--pf-c-options-menu__toggle--active--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-options-menu	--pf-c-options-menu__toggle--active--BorderBottomColor	#06c
--pf-c-options-menu__toggle--active--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu	--pf-c-options-menu__toggle--focus--BorderBottomWidth	2px
--pf-c-options-menu__toggle--focus--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-options-menu	--pf-c-options-menu__toggle--focus--BorderBottomColor	#06c
--pf-c-options-menu__toggle--focus--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu	--pf-c-options-menu__toggle--expanded--BorderBottomWidth	2px
--pf-c-options-menu__toggle--expanded--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-options-menu	--pf-c-options-menu__toggle--expanded--BorderBottomColor	#06c
--pf-c-options-menu__toggle--expanded--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu	--pf-c-options-menu__toggle--disabled--BackgroundColor	#f0f0f0
--pf-c-options-menu__toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-options-menu	--pf-c-options-menu__toggle--m-plain--Color	#6a6e73
--pf-c-options-menu__toggle--m-plain--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-options-menu	--pf-c-options-menu__toggle--m-plain--hover--Color	#151515
--pf-c-options-menu__toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-options-menu	--pf-c-options-menu__toggle--m-plain--disabled--Color	#d2d2d2
--pf-c-options-menu__toggle--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-options-menu	--pf-c-options-menu__toggle--m-plain--PaddingRight	1rem
--pf-c-options-menu__toggle--m-plain--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__toggle--m-plain--PaddingLeft	1rem
--pf-c-options-menu__toggle--m-plain--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__toggle-icon--MarginRight	0.5rem
--pf-c-options-menu__toggle-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__toggle-icon--MarginLeft	1rem
--pf-c-options-menu__toggle-icon--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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--m-plain__toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-options-menu	--pf-c-options-menu--m-plain--hover__toggle-icon--Color	#151515
--pf-c-options-menu--m-plain--hover__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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__toggle-button--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-options-menu	--pf-c-options-menu__toggle-button--PaddingRight	0.5rem
--pf-c-options-menu__toggle-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__toggle-button--PaddingBottom	0.375rem
--pf-c-options-menu__toggle-button--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-options-menu	--pf-c-options-menu__toggle-button--PaddingLeft	0.5rem
--pf-c-options-menu__toggle-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__menu--BackgroundColor	#fff
--pf-c-options-menu__menu--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #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__menu--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 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__menu--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__menu--PaddingBottom	0.5rem
--pf-c-options-menu__menu--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__menu--Top	calc(100% + 0.25rem)
--pf-c-options-menu__menu--Top calc(100% + --pf-global--spacer--xs) calc(100% + $pf-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem)
	.pf-c-options-menu	--pf-c-options-menu__menu--ZIndex	200
--pf-c-options-menu__menu--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 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--m-top__menu--TranslateY calc(-100% - --pf-global--spacer--xs) calc(-100% - $pf-global--spacer--xs) calc(-100% - pf-size-prem(4px)) 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__menu-item--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-options-menu	--pf-c-options-menu__menu-item--FontSize	1rem
--pf-c-options-menu__menu-item--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__menu-item--PaddingTop	0.5rem
--pf-c-options-menu__menu-item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__menu-item--PaddingRight	1rem
--pf-c-options-menu__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__menu-item--PaddingBottom	0.5rem
--pf-c-options-menu__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__menu-item--PaddingLeft	1rem
--pf-c-options-menu__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__menu-item--disabled--Color	#6a6e73
--pf-c-options-menu__menu-item--disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-options-menu	--pf-c-options-menu__menu-item--hover--BackgroundColor	#f0f0f0
--pf-c-options-menu__menu-item--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #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__menu-item-icon--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu	--pf-c-options-menu__menu-item-icon--FontSize	0.625rem
--pf-c-options-menu__menu-item-icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-options-menu	--pf-c-options-menu__menu-item-icon--PaddingLeft	1.5rem
--pf-c-options-menu__menu-item-icon--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-options-menu	--pf-c-options-menu__group--group--PaddingTop	0.5rem
--pf-c-options-menu__group--group--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--PaddingTop	0.5rem
--pf-c-options-menu__group-title--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--PaddingRight	1rem
--pf-c-options-menu__group-title--PaddingRight --pf-c-options-menu__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--PaddingBottom	0.5rem
--pf-c-options-menu__group-title--PaddingBottom --pf-c-options-menu__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--PaddingLeft	1rem
--pf-c-options-menu__group-title--PaddingLeft --pf-c-options-menu__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--FontSize	0.75rem
--pf-c-options-menu__group-title--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--FontWeight	400
--pf-c-options-menu__group-title--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-options-menu	--pf-c-options-menu__group-title--Color	#6a6e73
--pf-c-options-menu__group-title--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-options-menu	--pf-c-options-menu--c-divider--MarginTop	0.5rem
--pf-c-options-menu--c-divider--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-options-menu	--pf-c-options-menu--c-divider--MarginBottom	0.5rem
--pf-c-options-menu--c-divider--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--BorderBottomColor --pf-c-options-menu__toggle--hover--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu__toggle:not(.pf-m-plain):active::before	--pf-c-options-menu__toggle--BorderBottomColor	#06c
--pf-c-options-menu__toggle--BorderBottomColor --pf-c-options-menu__toggle--active--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu__toggle:not(.pf-m-plain):focus::before	--pf-c-options-menu__toggle--BorderBottomColor	#06c
--pf-c-options-menu__toggle--BorderBottomColor --pf-c-options-menu__toggle--focus--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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--BorderBottomColor --pf-c-options-menu__toggle--expanded--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-options-menu__toggle.pf-m-plain	--pf-c-options-menu__toggle-icon--Color	#6a6e73
--pf-c-options-menu__toggle-icon--Color --pf-c-options-menu--m-plain__toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #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--PaddingRight --pf-c-options-menu__toggle--m-plain--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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--PaddingLeft --pf-c-options-menu__toggle--m-plain--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-options-menu__toggle.pf-m-plain:hover	--pf-c-options-menu__toggle--m-plain--Color	#151515
--pf-c-options-menu__toggle--m-plain--Color --pf-c-options-menu__toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-options-menu__toggle.pf-m-plain:hover	--pf-c-options-menu--m-plain__toggle-icon--Color	#151515
--pf-c-options-menu--m-plain__toggle-icon--Color --pf-c-options-menu--m-plain--hover__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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--m-plain--Color --pf-c-options-menu__toggle--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain)	--pf-c-options-menu__toggle--BackgroundColor	#f0f0f0
--pf-c-options-menu__toggle--BackgroundColor --pf-c-options-menu__toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #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--Top --pf-c-options-menu--m-top__menu--Top 0
	.pf-c-options-menu__menu.pf-m-static	--pf-c-options-menu--m-top__menu--TranslateY	0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines

Options menu

Examples

Single option

Disabled

Multiple options

Plain

Align top

Align right

Plain with text

Plain with text disabled

Grouped items with titles

Single option with menu on document body

Props

OptionsMenu

OptionsMenuItem

OptionsMenuSeparator

OptionsMenuToggle

OptionsMenuToggleWithText

CSS variables