Skip to Content
Patternfly Logo

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.

ExamplesPropsCSS Variables

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

Props

OptionsMenu properties
NameTypeRequiredDefaultDescription
classNamestringNo''Classes applied to root element of the options menu
idstringYesId of the root element of the options menu
menuItemsReact.ReactNode[]YesArray of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list
toggleReact.ReactElementYesEither an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu
isPlainbooleanNoFlag to indicate the toggle has no border or background
isOpenbooleanNoFlag to indicate if menu is open
isTextbooleanNofalseFlag to indicate if toggle is textual toggle
isGroupedbooleanNofalseFlag to indicate if menu is groupped
ariaLabelMenustringNoProvides an accessible name for the options menu
position'right' | 'left'NoIndicates where menu will be aligned horizontally
direction'up' | 'down'NoMenu will open up or open down from the options menu toggle
OptionsMenuItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything which can be rendered as an options menu item
classNamestringNoClasses applied to root element of an options menu item
isSelectedbooleanNofalseRender options menu item as selected
isDisabledbooleanNoRender options menu item as disabled option
onSelect(event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => voidNo() => null as anyCallback for when this options menu item is selected
idstringNo''Unique id of this options menu item
OptionsMenuSeparator properties
NameTypeRequiredDefaultDescription
classNamestringNo''Classes applied to root element of options menu separator item
OptionsMenuToggle properties
NameTypeRequiredDefaultDescription
parentIdstringNo''Id of the parent options menu component
onToggle(isOpen: boolean) => voidNoCallback for when this options menu is toggled
isOpenbooleanNofalseFlag to indicate if menu is open
isPlainbooleanNofalseFlag to indicate if the button is plain
isFocusedbooleanNofalseForces display of the hover state of the options menu
isHoveredbooleanNofalseForces display of the hover state of the options menu
isSplitButtonbooleanNofalse
isActivebooleanNofalseForces display of the active state of the options menu
isDisabledbooleanNofalseDisables the options menu toggle
hideCaretbooleanNofalsehide the toggle caret
aria-labelstringNo'Options menu'Provides an accessible name for the button when an icon is used instead of text
onEnter(event: React.MouseEvent<HTMLButtonElement>) => voidNoInternal function to implement enter click
parentRefHTMLElementNoInternal parent reference
toggleTemplateReact.ReactNodeNo<React.Fragment />Content to be rendered in the options menu toggle button
OptionsMenuToggleWithText properties
NameTypeRequiredDefaultDescription
parentIdstringNo''Id of the parent options menu component
toggleTextReact.ReactNodeYesContent to be rendered inside the options menu toggle as text or another non-interactive element
toggleTextClassNamestringNo''classes to be added to the options menu toggle text
toggleButtonContentsReact.ReactNodeNoContent to be rendered inside the options menu toggle button
toggleButtonContentsClassNamestringNo''Classes to be added to the options menu toggle button
onToggle(event: boolean) => voidNo() => null as anyCallback for when this options menu is toggled
onEnter(event: React.MouseEvent<HTMLButtonElement>) => voidNoInner function to indicate open on Enter
isOpenbooleanNofalseFlag to indicate if menu is open
isPlainbooleanNofalseFlag to indicate if the button is plain
isFocusedbooleanNofalseForces display of the focused state of the options menu button
isHoveredbooleanNofalseForces display of the hover state of the options menu button
isActivebooleanNofalseForces display of the active state of the options menu button
isDisabledbooleanNofalseDisables the options menu toggle
parentRefHTMLElementNoInternal parent reference
ariaHasPopupboolean | 'dialog' | 'menu' | 'false' | 'true' | 'listbox' | 'tree' | 'grid'NoIndicates that the element has a popup context menu or sub-level menu
aria-labelstringNo'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--Backgroundc_options_menu__toggle_Background
transparent
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingTopc_options_menu__toggle_PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingRightc_options_menu__toggle_PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingBottomc_options_menu__toggle_PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingLeftc_options_menu__toggle_PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--MinWidthc_options_menu__toggle_MinWidth
44px
.pf-c-options-menu--pf-c-options-menu__toggle--LineHeightc_options_menu__toggle_LineHeight
1.5
.pf-c-options-menu--pf-c-options-menu__toggle--BorderWidthc_options_menu__toggle_BorderWidth
1px
.pf-c-options-menu--pf-c-options-menu__toggle--BorderTopColorc_options_menu__toggle_BorderTopColor
#ededed
.pf-c-options-menu--pf-c-options-menu__toggle--BorderRightColorc_options_menu__toggle_BorderRightColor
#ededed
.pf-c-options-menu--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#8a8d90
.pf-c-options-menu--pf-c-options-menu__toggle--BorderLeftColorc_options_menu__toggle_BorderLeftColor
#ededed
.pf-c-options-menu--pf-c-options-menu__toggle--Colorc_options_menu__toggle_Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--hover--BorderBottomColorc_options_menu__toggle_hover_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomWidthc_options_menu__toggle_active_BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomColorc_options_menu__toggle_active_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomWidthc_options_menu__toggle_focus_BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomColorc_options_menu__toggle_focus_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomWidthc_options_menu__toggle_expanded_BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomColorc_options_menu__toggle_expanded_BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--disabled--BackgroundColorc_options_menu__toggle_disabled_BackgroundColor
#ededed
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#737679
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--hover--Colorc_options_menu__toggle_m_plain_hover_Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--disabled--Colorc_options_menu__toggle_m_plain_disabled_Color
#d2d2d2
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginRightc_options_menu__toggle_icon_MarginRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginLeftc_options_menu__toggle_icon_MarginLeft
1rem
.pf-c-options-menu--pf-c-options-menu--m-top--m-expanded__toggle-icon--Transformc_options_menu_m_top_m_expanded__toggle_icon_Transform
rotate(180deg)
.pf-c-options-menu--pf-c-options-menu__toggle-button--Backgroundc_options_menu__toggle_button_Background
transparent
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingTopc_options_menu__toggle_button_PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingRightc_options_menu__toggle_button_PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingBottomc_options_menu__toggle_button_PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingLeftc_options_menu__toggle_button_PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--BackgroundColorc_options_menu__menu_BackgroundColor
#fff
.pf-c-options-menu--pf-c-options-menu__menu--BorderWidthc_options_menu__menu_BorderWidth
1px
.pf-c-options-menu--pf-c-options-menu__menu--BoxShadowc_options_menu__menu_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06)
.pf-c-options-menu--pf-c-options-menu__menu--PaddingTopc_options_menu__menu_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--PaddingBottomc_options_menu__menu_PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--Topc_options_menu__menu_Top
calc(100% + 0.25rem)
.pf-c-options-menu--pf-c-options-menu__menu--ZIndexc_options_menu__menu_ZIndex
200
.pf-c-options-menu--pf-c-options-menu--m-top__menu--Topc_options_menu_m_top__menu_Top
0
.pf-c-options-menu--pf-c-options-menu--m-top__menu--Transformc_options_menu_m_top__menu_Transform
translateY(calc(-100% - 0.25rem))
.pf-c-options-menu--pf-c-options-menu__menu-item--Backgroundc_options_menu__menu_item_Background
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item--FontSizec_options_menu__menu_item_FontSize
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingTopc_options_menu__menu_item_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingRightc_options_menu__menu_item_PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingBottomc_options_menu__menu_item_PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingLeftc_options_menu__menu_item_PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--Colorc_options_menu__menu_item_disabled_Color
#737679
.pf-c-options-menu--pf-c-options-menu__menu-item--hover--BackgroundColorc_options_menu__menu_item_hover_BackgroundColor
#ededed
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--BackgroundColorc_options_menu__menu_item_disabled_BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--Colorc_options_menu__menu_item_icon_Color
#06c
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--FontSizec_options_menu__menu_item_icon_FontSize
0.625rem
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--PaddingLeftc_options_menu__menu_item_icon_PaddingLeft
1.5rem
.pf-c-options-menu--pf-c-options-menu__c-divider--MarginTopc_options_menu__c_divider_MarginTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__c-divider--MarginBottomc_options_menu__c_divider_MarginBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__separator--Heightc_options_menu__separator_Height
1px
.pf-c-options-menu--pf-c-options-menu__separator--BackgroundColorc_options_menu__separator_BackgroundColor
#d2d2d2
.pf-c-options-menu--pf-c-options-menu__separator--MarginTopc_options_menu__separator_MarginTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__separator--MarginBottomc_options_menu__separator_MarginBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__group--group--PaddingTopc_options_menu__group_group_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingTopc_options_menu__group_title_PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingRightc_options_menu__group_title_PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingBottomc_options_menu__group_title_PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingLeftc_options_menu__group_title_PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontSizec_options_menu__group_title_FontSize
0.875rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontWeightc_options_menu__group_title_FontWeight
500
.pf-c-options-menu--pf-c-options-menu__group-title--Colorc_options_menu__group_title_Color
#737679
.pf-c-options-menu__toggle:not(.pf-m-plain):hover::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):active::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):focus::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
.pf-c-options-menu__toggle.pf-m-plain:hover--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#151515
.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#d2d2d2
.pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain)--pf-c-options-menu__toggle--Backgroundc_options_menu__toggle_Background
#ededed
.pf-c-options-menu.pf-m-top .pf-c-options-menu__menu--pf-c-options-menu__menu--Topc_options_menu__menu_Top
0
.pf-c-options-menu__separator:last-child--pf-c-options-menu__separator--MarginBottomc_options_menu__separator_MarginBottom
0