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

Options menu - single option

Copied to clipboard

Options menu - multiple options

Copied to clipboard

Options menu - plain

Copied to clipboard

Options menu - top

Copied to clipboard

Options menu - align right

Copied to clipboard

Options menu - plain with text

Custom text
Copied to clipboard

Props

OptionsMenu Props

The OptionsMenu component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Classes applied to root element of the Options menu
idstringId of the root element of the Options menu
menuItemsarrayOfArray of OptionsMenuItem and/or OptionMenuItemGroup nodes that will be rendered in the Options menu list
togglenodeEither an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the Options menu
isOpenboolfalseFlag to indicate if menu is open
isPlainboolfalseFlag to indicate the toggle has no border or background
ariaLabelMenustring''Provides an accessible name for the Options menu
directionenumOptionsMenuDirection.downDisplay menu above or below Options menu toggle
positionenumOptionsMenuPosition.leftIndicates where menu will be aligned horizontally

OptionsMenuItem Props

The OptionsMenuItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything which can be rendered as an Options menu item
classNamestring''Classes applied to root element of an Options menu item
isSelectedboolfalseRender Options menu item as selected
isDisabledboolfalseRender Options menu item as disabled option
onSelectfuncFunction.prototypeCallback for when this Options menu item is selected
idstring''Unique id of this Options menu item

OptionsMenuSeparator Props

The OptionsMenuSeparator component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Classes applied to root element of Options menu separator item

OptionsMenuToggle Props

The OptionsMenuToggle component accepts the following props.

NameTypeRequiredDefaultDescription
parentIdstring''Id of the parent Options menu component
onTogglefuncFunction.prototypeCallback for when this Options menu is toggled
isOpenboolfalseFlag to indicate if menu is open
isPlainboolfalseFlag to indicate if the button is plain
isHoveredboolfalseForces display of the hover state of the Options menu
isActiveboolfalseForces display of the active state of the Options menu
isFocusedboolfalseForces display of the hover state of the Options menu
toggleTemplateunion''Content to be rendered in the Options menu toggle button
toggleTemplatePropsobjectundefinedProps to be passed to the Options menu toggle button template
hideCaretboolfalsehide the toggle caret
aria-labelstring'Options menu'Provides an accessible name for the button when an icon is used instead of text

OptionsMenuToggleWithText Props

The OptionsMenuToggleWithText component accepts the following props.

NameTypeRequiredDefaultDescription
parentIdstring''Id of the parent Options menu component
toggleTextnodeContent 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
toggleButtonContentsnodeContent to be rendered inside the Options menu toggle button
toggleButtonContentsClassNamestring''Classes to be added to the Options menu toggle button
onTogglefuncFunction.prototypeCallback for when this Options menu is toggled
isOpenboolfalseFlag to indicate if menu is open
isPlainboolfalseFlag to indicate if the button is plain
isHoveredboolfalseForces display of the hover state of the Options menu button
isActiveboolfalseForces display of the active state of the Options menu button
isFocusedboolfalseForces display of the hover state of the Options menu button
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__menu--BackgroundColorc_options_menu__menu_BackgroundColor#fff
--pf-c-options-menu__menu--BorderWidthc_options_menu__menu_BorderWidth1px
--pf-c-options-menu__menu--BoxShadowc_options_menu__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-options-menu__menu--PaddingBottomc_options_menu__menu_PaddingBottom0.5rem
--pf-c-options-menu__menu--PaddingTopc_options_menu__menu_PaddingTop0.5rem
--pf-c-options-menu__menu--Topc_options_menu__menu_Top0
--pf-c-options-menu__menu--ZIndexc_options_menu__menu_ZIndex100
--pf-c-options-menu__menu-item--Backgroundc_options_menu__menu_item_Backgroundtransparent
--pf-c-options-menu__menu-item--FontSizec_options_menu__menu_item_FontSize1rem
--pf-c-options-menu__menu-item--PaddingBottomc_options_menu__menu_item_PaddingBottom0.5rem
--pf-c-options-menu__menu-item--PaddingLeftc_options_menu__menu_item_PaddingLeft1rem
--pf-c-options-menu__menu-item--PaddingRightc_options_menu__menu_item_PaddingRight1rem
--pf-c-options-menu__menu-item--PaddingTopc_options_menu__menu_item_PaddingTop0.5rem
--pf-c-options-menu__menu-item--disabled--BackgroundColorc_options_menu__menu_item_disabled_BackgroundColortransparent
--pf-c-options-menu__menu-item--disabled--Colorc_options_menu__menu_item_disabled_Color#72767b
--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_FontSize0.625rem
--pf-c-options-menu__menu-item-icon--PaddingLeftc_options_menu__menu_item_icon_PaddingLeft1.5rem
--pf-c-options-menu__separator--BackgroundColorc_options_menu__separator_BackgroundColor#ededed
--pf-c-options-menu__separator--Heightc_options_menu__separator_Height1px
--pf-c-options-menu__separator--MarginBottomc_options_menu__separator_MarginBottom0.5rem
--pf-c-options-menu__separator--MarginTopc_options_menu__separator_MarginTop0.5rem
--pf-c-options-menu__toggle--Backgroundc_options_menu__toggle_Backgroundtransparent
--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_BorderWidth1px
--pf-c-options-menu__toggle--Colorc_options_menu__toggle_Color#151515
--pf-c-options-menu__toggle--LineHeightc_options_menu__toggle_LineHeight1.5
--pf-c-options-menu__toggle--MinWidthc_options_menu__toggle_MinWidth44px
--pf-c-options-menu__toggle--PaddingBottomc_options_menu__toggle_PaddingBottom0.375rem
--pf-c-options-menu__toggle--PaddingLeftc_options_menu__toggle_PaddingLeft0.5rem
--pf-c-options-menu__toggle--PaddingRightc_options_menu__toggle_PaddingRight0.5rem
--pf-c-options-menu__toggle--PaddingTopc_options_menu__toggle_PaddingTop0.375rem
--pf-c-options-menu__toggle--active--BorderBottomColorc_options_menu__toggle_active_BorderBottomColor#06c
--pf-c-options-menu__toggle--active--BorderBottomWidthc_options_menu__toggle_active_BorderBottomWidth2px
--pf-c-options-menu__toggle-button--Backgroundc_options_menu__toggle_button_Backgroundtransparent
--pf-c-options-menu__toggle-button--PaddingBottomc_options_menu__toggle_button_PaddingBottom0.375rem
--pf-c-options-menu__toggle-button--PaddingLeftc_options_menu__toggle_button_PaddingLeft0.5rem
--pf-c-options-menu__toggle-button--PaddingRightc_options_menu__toggle_button_PaddingRight0.5rem
--pf-c-options-menu__toggle-button--PaddingTopc_options_menu__toggle_button_PaddingTop0.375rem
--pf-c-options-menu__toggle--expanded--BorderBottomColorc_options_menu__toggle_expanded_BorderBottomColor#06c
--pf-c-options-menu__toggle--expanded--BorderBottomWidthc_options_menu__toggle_expanded_BorderBottomWidth2px
--pf-c-options-menu__toggle--focus--BorderBottomColorc_options_menu__toggle_focus_BorderBottomColor#06c
--pf-c-options-menu__toggle--focus--BorderBottomWidthc_options_menu__toggle_focus_BorderBottomWidth2px
--pf-c-options-menu__toggle--hover--BorderBottomColorc_options_menu__toggle_hover_BorderBottomColor#06c
--pf-c-options-menu__toggle-icon--MarginLeftc_options_menu__toggle_icon_MarginLeft1rem
--pf-c-options-menu__toggle-icon--MarginRightc_options_menu__toggle_icon_MarginRight0.5rem
--pf-c-options-menu__toggle--m-plain--Colorc_options_menu__toggle_m_plain_Color#151515
--pf-c-options-menu__toggle--m-plain--hover--Colorc_options_menu__toggle_m_plain_hover_Color#151515
--pf-c-options-menu--m-top__menu--Topc_options_menu_m_top__menu_Top0
--pf-c-options-menu--m-top__menu--Transformc_options_menu_m_top__menu_TransformtranslateY(calc(-100% - 0.25rem))