Examples
Props
OptionsMenu
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Id of the root element of the options menu | |
| menuItemsrequired | React.ReactNode[] | Array of OptionsMenuItem and/or OptionMenuGroup nodes that will be rendered in the options menu list | |
| togglerequired | React.ReactElement | Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the options menu | |
| className | string | '' | Classes applied to root element of the options menu |
| direction | 'up' | 'down' | Menu will open up or open down from the options menu toggle | |
| isGrouped | boolean | false | Flag to indicate if menu is groupped |
| isOpen | boolean | Flag to indicate if menu is open | |
| isPlain | boolean | Flag to indicate the toggle has no border or background | |
| isText | boolean | false | Flag to indicate if toggle is textual toggle |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')} |
| ouiaSafe | No type info | true | |
| position | 'right' | 'left' | Indicates where menu will be aligned horizontally |
OptionsMenuItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything which can be rendered as an options menu item |
| className | string | Classes applied to root element of an options menu item | |
| id | string | '' | Unique id of this options menu item |
| isDisabled | boolean | Render options menu item as disabled option | |
| isSelected | boolean | false | Render options menu item as selected |
| onSelect | (event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => void | () => null as any | Callback for when this options menu item is selected |
OptionsMenuSeparator
| Name | Type | Default | Description |
|---|---|---|---|
| component | No type info | 'li' |
OptionsMenuToggle
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Options menu' | Provides an accessible name for the button when an icon is used instead of text |
| hideCaret | boolean | false | hide the toggle caret |
| isActive | boolean | false | Forces display of the active state of the options menu |
| isDisabled | boolean | false | Disables the options menu toggle |
| isOpen | boolean | false | Flag to indicate if menu is open |
| isPlain | boolean | false | Flag to indicate if the button is plain |
| isSplitButton | boolean | false | |
| onToggle | (isOpen: boolean) => void | Callback for when this options menu is toggled | |
| parentId | string | '' | Id of the parent options menu component |
| toggleTemplate | React.ReactNode | <React.Fragment /> | Content to be rendered in the options menu toggle button |
OptionsMenuToggleWithText
| Name | Type | Default | Description |
|---|---|---|---|
| toggleTextrequired | React.ReactNode | Content to be rendered inside the options menu toggle as text or another non-interactive element | |
| aria-haspopup | boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | Indicates that the element has a popup context menu or sub-level menu | |
| aria-label | string | 'Options menu' | Provides an accessible name for the button when an icon is used instead of text |
| isActive | boolean | false | Forces display of the active state of the options menu button |
| isDisabled | boolean | false | Disables the options menu toggle |
| isOpen | boolean | false | Flag to indicate if menu is open |
| isPlain | boolean | false | Flag to indicate if the button is plain |
| onEnter | (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<Element>) => void | Inner function to indicate open on Enter | |
| onToggle | (event: boolean) => void | () => null as any | Callback for when this options menu is toggled |
| parentId | string | '' | Id of the parent options menu component |
| toggleButtonContents | React.ReactNode | Content to be rendered inside the options menu toggle button | |
| toggleButtonContentsClassName | string | '' | Classes to be added to the options menu toggle button |
| toggleTextClassName | string | '' | 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--m-plain__toggle-icon--Color | #6a6e73 | |
| .pf-c-options-menu | --pf-c-options-menu--m-plain--hover__toggle-icon--Color | #151515 | |
| .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 | --pf-c-options-menu__toggle-icon--Color | #6a6e73 | |
| .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:hover | --pf-c-options-menu__toggle--m-plain--Color | #151515 | |
| .pf-c-options-menu__toggle.pf-m-plain:hover | --pf-c-options-menu--m-plain__toggle-icon--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
