Skip to content
Patternfly Logo

Options menu

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

*required
NameTypeDefaultDescription
idrequiredstringId of the root element of the options menu
menuItemsrequiredReact.ReactNode[]Array of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list
togglerequiredReact.ReactElementEither an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu
classNamestring''Classes applied to root element of the options menu
direction'up' | 'down'Menu will open up or open down from the options menu toggle
isGroupedbooleanfalseFlag to indicate if menu is groupped
isOpenbooleanFlag to indicate if menu is open
isPlainbooleanFlag to indicate the toggle has no border or background
isTextbooleanfalseFlag to indicate if toggle is textual toggle
menuAppendToNo type info'inline'
ouiaSafeNo type infotrue
position'right' | 'left'Indicates where menu will be aligned horizontally

OptionsMenuItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything which can be rendered as an options menu item
classNamestringClasses applied to root element of an options menu item
idstring''Unique id of this options menu item
isDisabledbooleanRender options menu item as disabled option
isSelectedbooleanfalseRender options menu item as selected
onSelect(event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => void() => null as anyCallback for when this options menu item is selected

OptionsMenuSeparator

*required
NameTypeDefaultDescription
componentNo type info'li'

OptionsMenuToggle

*required
NameTypeDefaultDescription
aria-labelstring'Options menu'Provides an accessible name for the button when an icon is used instead of text
hideCaretbooleanfalsehide the toggle caret
isActivebooleanfalseForces display of the active state of the options menu
isDisabledbooleanfalseDisables the options menu toggle
isOpenbooleanfalseFlag to indicate if menu is open
isPlainbooleanfalseFlag to indicate if the button is plain
isSplitButtonbooleanfalse
onEnter(event: React.MouseEvent<HTMLButtonElement>) => voidInternal function to implement enter click
onToggle(isOpen: boolean) => voidCallback for when this options menu is toggled
parentIdstring''Id of the parent options menu component
parentRefHTMLElementInternal parent reference
toggleTemplateReact.ReactNode<React.Fragment />Content to be rendered in the options menu toggle button

OptionsMenuToggleWithText

*required
NameTypeDefaultDescription
toggleTextrequiredReact.ReactNodeContent to be rendered inside the options menu toggle as text or another non-interactive element
aria-haspopupboolean | 'dialog' | 'menu' | '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
isActivebooleanfalseForces display of the active state of the options menu button
isDisabledbooleanfalseDisables the options menu toggle
isOpenbooleanfalseFlag to indicate if menu is open
isPlainbooleanfalseFlag to indicate if the button is plain
onEnter(event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<Element>) => voidInner function to indicate open on Enter
onToggle(event: boolean) => void() => null as anyCallback for when this options menu is toggled
parentIdstring''Id of the parent options menu component
parentRefReact.RefObject<HTMLElement>Internal parent reference
toggleButtonContentsReact.ReactNodeContent to be rendered inside the options menu toggle button
toggleButtonContentsClassNamestring''Classes to be added to the options menu toggle button
toggleTextClassNamestring''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
0
.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--m-plain--PaddingRight
1rem
.pf-c-options-menu--pf-c-options-menu__toggle--m-plain--PaddingLeft
1rem
.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:not(.pf-m-text)--pf-c-options-menu__toggle--PaddingRight
1rem
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text)--pf-c-options-menu__toggle--PaddingLeft
1rem
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover--pf-c-options-menu__toggle--m-plain--Color
#151515
.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).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