React

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

Props

OptionsMenu properties
NameTypeRequiredDefaultDescription
classNamestring''Classes applied to root element of the Options menu
idstringId of the root element of the Options menu
menuItemsReact.ReactNode[]Array of OptionsMenuItem and/or OptionMenuItemGroup nodes that will be rendered in the Options menu list
toggleReact.ReactElementEither an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the Options menu
isPlainbooleanFlag to indicate the toggle has no border or background
isOpenbooleanFlag to indicate if menu is open
isTextbooleanfalseFlag to indicate if toggle is textual toggle
isGroupedbooleanfalseFlag to indicate if menu is groupped
ariaLabelMenustringProvides an accessible name for the Options menu
position'right' | 'left'Indicates where menu will be aligned horizontally
direction'up' | 'down'Menu will open up or open down from the Options menu toggle
OptionsMenuItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull as React.ReactNodeAnything which can be rendered as an Options menu item
classNamestringClasses applied to root element of an Options menu item
isSelectedbooleanfalseRender Options menu item as selected
isDisabledbooleanRender Options menu item as disabled option
onSelect(event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => void() => null as anyCallback for when this Options menu item is selected
idstring''Unique id of this Options menu item
OptionsMenuSeparator properties
NameTypeRequiredDefaultDescription
classNamestring''Classes applied to root element of Options menu separator item
OptionsMenuToggle properties
NameTypeRequiredDefaultDescription
parentIdstring''Id of the parent Options menu component
onToggle(isOpen: boolean) => voidCallback for when this Options menu is toggled
isOpenbooleanfalseFlag to indicate if menu is open
isPlainbooleanfalseFlag to indicate if the button is plain
isFocusedbooleanfalseForces display of the hover state of the Options menu
isHoveredbooleanfalseForces display of the hover state of the Options menu
isSplitButtonbooleanfalse
isActivebooleanfalseForces display of the active state of the Options menu
isDisabledbooleanfalseDisables the options menu toggle
hideCaretbooleanfalsehide the toggle caret
aria-labelstring'Options menu'Provides an accessible name for the button when an icon is used instead of text
onEnter(event: React.MouseEvent<HTMLButtonElement>) => voidInternal function to implement enter click
parentRefHTMLElementInternal parent reference
toggleTemplateReact.ReactNode<React.Fragment />Content to be rendered in the Options menu toggle button
OptionsMenuToggleWithText properties
NameTypeRequiredDefaultDescription
parentIdstring''Id of the parent Options menu component
toggleTextReact.ReactNodeContent to be rendered inside the Options menu toggle as text or another non-interactive element
toggleTextClassNamestring''classes to be added to the Options menu toggle text
toggleButtonContentsReact.ReactNodeContent to be rendered inside the Options menu toggle button
toggleButtonContentsClassNamestring''Classes to be added to the Options menu toggle button
onToggle(event: boolean) => void() => null as anyCallback for when this Options menu is toggled
onEnter(event: React.MouseEvent<HTMLButtonElement>) => voidInner function to indicate open on Enter
isOpenbooleanfalseFlag to indicate if menu is open
isPlainbooleanfalseFlag to indicate if the button is plain
isFocusedbooleanfalseForces display of the focused state of the Options menu button
isHoveredbooleanfalseForces display of the hover state of the Options menu button
isActivebooleanfalseForces display of the active state of the Options menu button
isDisabledbooleanfalseDisables the options menu toggle
parentRefHTMLElementInternal parent reference
ariaHasPopupboolean | 'dialog' | 'menu' | 'false' | 'true' | '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

CSS Variables

--pf-c-options-menu__c-divider--MarginBottomc_options_menu__c_divider_MarginBottom
0.5rem
--pf-c-options-menu__c-divider--MarginTopc_options_menu__c_divider_MarginTop
0.5rem
--pf-c-options-menu__menu--BackgroundColorc_options_menu__menu_BackgroundColor
#fff
--pf-c-options-menu__menu--BorderWidthc_options_menu__menu_BorderWidth
1px
--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__menu-item--Backgroundc_options_menu__menu_item_Background
transparent
--pf-c-options-menu__menu-item--disabled--BackgroundColorc_options_menu__menu_item_disabled_BackgroundColor
transparent
--pf-c-options-menu__menu-item--disabled--Colorc_options_menu__menu_item_disabled_Color
#737679
--pf-c-options-menu__menu-item--FontSizec_options_menu__menu_item_FontSize
1rem
--pf-c-options-menu__menu-item--hover--BackgroundColorc_options_menu__menu_item_hover_BackgroundColor
#ededed
--pf-c-options-menu__menu-item-icon--Colorc_options_menu__menu_item_icon_Color
#06c
--pf-c-options-menu__menu-item-icon--FontSizec_options_menu__menu_item_icon_FontSize
0.625rem
--pf-c-options-menu__menu-item-icon--PaddingLeftc_options_menu__menu_item_icon_PaddingLeft
1.5rem
--pf-c-options-menu__menu-item--PaddingBottomc_options_menu__menu_item_PaddingBottom
0.5rem
--pf-c-options-menu__menu-item--PaddingLeftc_options_menu__menu_item_PaddingLeft
1rem
--pf-c-options-menu__menu-item--PaddingRightc_options_menu__menu_item_PaddingRight
1rem
--pf-c-options-menu__menu-item--PaddingTopc_options_menu__menu_item_PaddingTop
0.5rem
--pf-c-options-menu__menu--PaddingBottomc_options_menu__menu_PaddingBottom
0.5rem
--pf-c-options-menu__menu--PaddingTopc_options_menu__menu_PaddingTop
0.5rem
--pf-c-options-menu__menu--Topc_options_menu__menu_Top
0
--pf-c-options-menu__menu--ZIndexc_options_menu__menu_ZIndex
200
--pf-c-options-menu__separator--BackgroundColorc_options_menu__separator_BackgroundColor
#d2d2d2
--pf-c-options-menu__separator--Heightc_options_menu__separator_Height
1px
--pf-c-options-menu__separator--MarginBottomc_options_menu__separator_MarginBottom
0.5rem
--pf-c-options-menu__separator--MarginTopc_options_menu__separator_MarginTop
0.5rem
--pf-c-options-menu__toggle--active--BorderBottomColorc_options_menu__toggle_active_BorderBottomColor
#06c
--pf-c-options-menu__toggle--active--BorderBottomWidthc_options_menu__toggle_active_BorderBottomWidth
2px
--pf-c-options-menu__toggle--Backgroundc_options_menu__toggle_Background
#ededed
--pf-c-options-menu__toggle--BorderBottomColorc_options_menu__toggle_BorderBottomColor
#06c
--pf-c-options-menu__toggle--BorderLeftColorc_options_menu__toggle_BorderLeftColor
#ededed
--pf-c-options-menu__toggle--BorderRightColorc_options_menu__toggle_BorderRightColor
#ededed
--pf-c-options-menu__toggle--BorderTopColorc_options_menu__toggle_BorderTopColor
#ededed
--pf-c-options-menu__toggle--BorderWidthc_options_menu__toggle_BorderWidth
1px
--pf-c-options-menu__toggle-button--Backgroundc_options_menu__toggle_button_Background
transparent
--pf-c-options-menu__toggle-button--PaddingBottomc_options_menu__toggle_button_PaddingBottom
0.375rem
--pf-c-options-menu__toggle-button--PaddingLeftc_options_menu__toggle_button_PaddingLeft
0.5rem
--pf-c-options-menu__toggle-button--PaddingRightc_options_menu__toggle_button_PaddingRight
0.5rem
--pf-c-options-menu__toggle-button--PaddingTopc_options_menu__toggle_button_PaddingTop
0.375rem
--pf-c-options-menu__toggle--Colorc_options_menu__toggle_Color
#151515
--pf-c-options-menu__toggle--disabled--BackgroundColorc_options_menu__toggle_disabled_BackgroundColor
#ededed
--pf-c-options-menu__toggle--expanded--BorderBottomColorc_options_menu__toggle_expanded_BorderBottomColor
#06c
--pf-c-options-menu__toggle--expanded--BorderBottomWidthc_options_menu__toggle_expanded_BorderBottomWidth
2px
--pf-c-options-menu__toggle--focus--BorderBottomColorc_options_menu__toggle_focus_BorderBottomColor
#06c
--pf-c-options-menu__toggle--focus--BorderBottomWidthc_options_menu__toggle_focus_BorderBottomWidth
2px
--pf-c-options-menu__toggle--hover--BorderBottomColorc_options_menu__toggle_hover_BorderBottomColor
#06c
--pf-c-options-menu__toggle-icon--MarginLeftc_options_menu__toggle_icon_MarginLeft
1rem
--pf-c-options-menu__toggle-icon--MarginRightc_options_menu__toggle_icon_MarginRight
0.5rem
--pf-c-options-menu__toggle--LineHeightc_options_menu__toggle_LineHeight
1.5
--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color
#d2d2d2
--pf-c-options-menu__toggle--m-plain--disabled--Colorc_options_menu__toggle_m_plain_disabled_Color
#d2d2d2
--pf-c-options-menu__toggle--m-plain--hover--Colorc_options_menu__toggle_m_plain_hover_Color
#151515
--pf-c-options-menu__toggle--MinWidthc_options_menu__toggle_MinWidth
44px
--pf-c-options-menu__toggle--PaddingBottomc_options_menu__toggle_PaddingBottom
0.375rem
--pf-c-options-menu__toggle--PaddingLeftc_options_menu__toggle_PaddingLeft
0.5rem
--pf-c-options-menu__toggle--PaddingRightc_options_menu__toggle_PaddingRight
0.5rem
--pf-c-options-menu__toggle--PaddingTopc_options_menu__toggle_PaddingTop
0.375rem
--pf-c-options-menu--m-top__menu--Topc_options_menu_m_top__menu_Top
0
--pf-c-options-menu--m-top__menu--Transformc_options_menu_m_top__menu_Transform
translateY(calc(-100% - 0.25rem))
--pf-c-options-menu--m-top--m-expanded__toggle-icon--Transformc_options_menu_m_top_m_expanded__toggle_icon_Transform
rotate(180deg)