Patternfly Logo

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

Single option with menu on document body

Props

OptionsMenu properties
NameTypeRequiredDefaultDescription
classNamestringNo''Classes applied to root element of the options menu
direction'up' | 'down'NoMenu will open up or open down from the options menu toggle
idstringYesId of the root element of the options menu
isGroupedbooleanNofalseFlag to indicate if menu is groupped
isOpenbooleanNoFlag to indicate if menu is open
isPlainbooleanNoFlag to indicate the toggle has no border or background
isTextbooleanNofalseFlag to indicate if toggle is textual toggle
menuAppendToNo type infoNo'inline'
menuItemsReact.ReactNode[]YesArray of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list
ouiaSafeNo type infoNotrue
position'right' | 'left'NoIndicates where menu will be aligned horizontally
toggleReact.ReactElementYesEither an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu
OptionsMenuItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything which can be rendered as an options menu item
classNamestringNoClasses applied to root element of an options menu item
idstringNo''Unique id of this options menu item
isDisabledbooleanNoRender options menu item as disabled option
isSelectedbooleanNofalseRender options menu item as selected
onSelect(event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => voidNo() => null as anyCallback for when this options menu item is selected
OptionsMenuSeparator properties
NameTypeRequiredDefaultDescription
componentNo type infoNo'li'
OptionsMenuToggle properties
NameTypeRequiredDefaultDescription
aria-labelstringNo'Options menu'Provides an accessible name for the button when an icon is used instead of text
hideCaretbooleanNofalsehide the toggle caret
isActivebooleanNofalseForces display of the active state of the options menu
isDisabledbooleanNofalseDisables the options menu toggle
isOpenbooleanNofalseFlag to indicate if menu is open
isPlainbooleanNofalseFlag to indicate if the button is plain
isSplitButtonbooleanNofalse
onEnter(event: React.MouseEvent<HTMLButtonElement>) => voidNoInternal function to implement enter click
onToggle(isOpen: boolean) => voidNoCallback for when this options menu is toggled
parentIdstringNo''Id of the parent options menu component
parentRefHTMLElementNoInternal parent reference
toggleTemplateReact.ReactNodeNo<React.Fragment />Content to be rendered in the options menu toggle button
OptionsMenuToggleWithText properties
NameTypeRequiredDefaultDescription
aria-haspopupboolean | 'dialog' | 'menu' | '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
isActivebooleanNofalseForces display of the active state of the options menu button
isDisabledbooleanNofalseDisables the options menu toggle
isOpenbooleanNofalseFlag to indicate if menu is open
isPlainbooleanNofalseFlag to indicate if the button is plain
onEnter(event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<Element>) => voidNoInner function to indicate open on Enter
onToggle(event: boolean) => voidNo() => null as anyCallback for when this options menu is toggled
parentIdstringNo''Id of the parent options menu component
parentRefReact.RefObject<HTMLElement>NoInternal parent reference
toggleButtonContentsReact.ReactNodeNoContent to be rendered inside the options menu toggle button
toggleButtonContentsClassNamestringNo''Classes to be added to the options menu toggle button
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

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--pf-c-options-menu__toggle--PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle--PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle--MinWidth
44px
.pf-c-options-menu--pf-c-options-menu__toggle--LineHeight
1.5
.pf-c-options-menu--pf-c-options-menu__toggle--BorderWidth
1px
.pf-c-options-menu--pf-c-options-menu__toggle--BorderTopColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--BorderRightColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--BorderBottomColor
#8a8d90
.pf-c-options-menu--pf-c-options-menu__toggle--BorderLeftColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--hover--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--active--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--focus--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomWidth
2px
.pf-c-options-menu--pf-c-options-menu__toggle--expanded--BorderBottomColor
#06c
.pf-c-options-menu--pf-c-options-menu__toggle--disabled--BackgroundColor
#f0f0f0
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--hover--Color
#151515
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--disabled--Color
#d2d2d2
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-icon--MarginLeft
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__toggle-button--BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingTop
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingRight
0.5rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingBottom
0.375rem
.pf-c-options-menu--pf-c-options-menu__toggle-button--PaddingLeft
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--BackgroundColor
#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--pf-c-options-menu__menu--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu--Top
calc(100% + 0.25rem)
.pf-c-options-menu--pf-c-options-menu__menu--ZIndex
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--pf-c-options-menu__menu-item--BackgroundColor
transparent
.pf-c-options-menu--pf-c-options-menu__menu-item--Color
#151515
.pf-c-options-menu--pf-c-options-menu__menu-item--FontSize
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__menu-item--PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__menu-item--disabled--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu__menu-item--hover--BackgroundColor
#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--pf-c-options-menu__menu-item-icon--FontSize
0.625rem
.pf-c-options-menu--pf-c-options-menu__menu-item-icon--PaddingLeft
1.5rem
.pf-c-options-menu--pf-c-options-menu__group--group--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingTop
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingBottom
0.5rem
.pf-c-options-menu--pf-c-options-menu__group-title--PaddingLeft
1rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontSize
0.875rem
.pf-c-options-menu--pf-c-options-menu__group-title--FontWeight
700
.pf-c-options-menu--pf-c-options-menu__group-title--Color
#6a6e73
.pf-c-options-menu--pf-c-options-menu--c-divider--MarginTop
0.5rem
.pf-c-options-menu--pf-c-options-menu--c-divider--MarginBottom
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:not(.pf-m-plain):active::before--pf-c-options-menu__toggle--BorderBottomColor
#06c
.pf-c-options-menu__toggle:not(.pf-m-plain):focus::before--pf-c-options-menu__toggle--BorderBottomColor
#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.pf-m-plain:hover--pf-c-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--Color
#d2d2d2
.pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain)--pf-c-options-menu__toggle--BackgroundColor
#f0f0f0
.pf-c-options-menu.pf-m-top .pf-c-options-menu__menu--pf-c-options-menu__menu--Top
0

View source on GitHub