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 Props CSS Variables

Examples

Single option

Disabled

Multiple options

Plain

Align top

Align right

Plain with text

Plain with text disabled

Grouped items with titles

Props

OptionsMenu properties
Name	Type	Required	Default	Description
className	string	No	''	Classes applied to root element of the options menu
id	string	Yes		Id of the root element of the options menu
menuItems	React.ReactNode[]	Yes		Array of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list
toggle	React.ReactElement	Yes		Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu
isPlain	boolean	No		Flag to indicate the toggle has no border or background
isOpen	boolean	No		Flag to indicate if menu is open
isText	boolean	No	false	Flag to indicate if toggle is textual toggle
isGrouped	boolean	No	false	Flag to indicate if menu is groupped
position	'right' \| 'left'	No		Indicates where menu will be aligned horizontally
direction	'up' \| 'down'	No		Menu will open up or open down from the options menu toggle

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

OptionsMenuSeparator properties
Name	Type	Required	Default	Description
component		No	'li'

OptionsMenuToggle properties
Name	Type	Required	Default	Description
parentId	string	No	''	Id of the parent options menu component
onToggle	(isOpen: boolean) => void	No		Callback for when this options menu is toggled
isOpen	boolean	No	false	Flag to indicate if menu is open
isPlain	boolean	No	false	Flag to indicate if the button is plain
isSplitButton	boolean	No	false
isActive	boolean	No	false	TODO: Use once core reimplements. Forces display of the active state of the options menu
isDisabled	boolean	No	false	Disables the options menu toggle
hideCaret	boolean	No	false	hide the toggle caret
aria-label	string	No	'Options menu'	Provides an accessible name for the button when an icon is used instead of text
onEnter	(event: React.MouseEvent<HTMLButtonElement>) => void	No		Internal function to implement enter click
parentRef	HTMLElement	No		Internal parent reference
toggleTemplate	React.ReactNode	No	<React.Fragment />	Content to be rendered in the options menu toggle button

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

CSS Variables


	.pf-c-options-menu	--pf-c-options-menu__toggle--Background	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	44px
--pf-c-options-menu__toggle--MinWidth --pf-global--target-size--MinWidth $pf-global--target-size--MinWidth 44px
	.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-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--Transform	rotate(180deg)
	.pf-c-options-menu	--pf-c-options-menu__toggle-button--Background	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--Transform	translateY(calc(-100% - 0.25rem))
--pf-c-options-menu--m-top__menu--Transform translateY(calc(-100% - --pf-global--spacer--xs)) translateY(calc(-100% - $pf-global--spacer--xs)) translateY(calc(-100% - pf-size-prem(4px))) translateY(calc(-100% - 0.25rem))
	.pf-c-options-menu	--pf-c-options-menu__menu-item--Background	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.875rem
--pf-c-options-menu__group-title--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-options-menu	--pf-c-options-menu__group-title--FontWeight	500
--pf-c-options-menu__group-title--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold 500
	.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: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.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--Background	#f0f0f0
--pf-c-options-menu__toggle--Background --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