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.
ExamplesDocumentationCSS VariablesExamples
Documentation
Accessibility
This section to be updated once the React implementation is complete.
| Attribute | Applied to | Outcome |
|---|---|---|
role or aria | pf-c-options-menu | accessibility notes. |
disabled | .pf-c-options-menu__toggle, .pf-c-options-menu__toggle-button | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
Note: The attribute aria-selected="true" should be set programmatically to the selected item(s).
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-options-menu | <div> | Initiates a custom options menu. |
.pf-c-options-menu__toggle | <button> | Initiates a custom toggle. |
.pf-c-options-menu__toggle-text | <span> | Initiates a wrapper for toggle text. |
.pf-c-options-menu__toggle-icon | <i> | Initiates the up/down arrow beside toggle text. |
.pf-c-options-menu__toggle-button | <button> | Initiates a custom toggle button for use when .pf-c-options-menu__toggle is a <div> or non-interactive element. |
.pf-c-options-menu__menu | <ul> | Initiates the custom options-menu menu. |
.pf-c-options-menu__menu-item | <li> | Initiates the items in the custom options-menu menu. |
.pf-c-options-menu__menu-item-icon | <i> | Initiates the icon to indicate selected menu items. |
.pf-c-options-menu__group | <section> | Defines a group of items in an options menu. Required when there is more than one group in an options menu. |
.pf-c-options-menu__group-title | <h1> | Defines the title for a group of items in an options menu. |
.pf-m-top | .pf-c-options-menu | Modifies to display the menu above the toggle. |
.pf-m-align-right | .pf-c-options-menu__menu | Modifies to display the menu aligned to the right edge of the toggle |
.pf-m-expanded | .pf-c-options-menu | Modifies for the expanded state. |
.pf-m-plain | .pf-c-options-menu__toggle | Modifies to display the toggle with no border. |
.pf-m-disabled | .pf-c-options-menu__toggle | Modifies to display the options menu toggle as disabled. This applies to pf-c-options-menu__toggle and should not be used in lieu of the disabled attribute on pf-c-options-menu__toggle. When this is used, disabled should also be added to any form elements in .pf-c-options-menu__toggle |
.pf-m-text | .pf-c-options-menu__toggle | For use when the .pf-c-options-menu__toggle is a <div> or some non-interactive elment, and you're using a custom .pf-c-options-menu__toggle-button to toggle the options menu. |
CSS Variables
| .pf-c-options-menu | --pf-c-options-menu__toggle--Background | 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--Transform | rotate(180deg) | ||
| .pf-c-options-menu | --pf-c-options-menu__toggle-button--Background | 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--Transform | translateY(calc(-100% - 0.25rem)) | ||
| .pf-c-options-menu | --pf-c-options-menu__menu-item--Background | 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 | 500 | ||
| .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--Background | #f0f0f0 | ||
| .pf-c-options-menu.pf-m-top .pf-c-options-menu__menu | --pf-c-options-menu__menu--Top | 0 | ||
