Examples
Documentation
Accessibility
Attribute | Applied | Outcome |
---|---|---|
role="menu" | .pf-v6-c-menu__list | Declares .pf-v6-c-menu__list as a menu. |
disabled | button.pf-v6-c-menu__item | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
role="menuitem" | .pf-v6-c-menu__item , .pf-v6-c-menu__list-item (checkbox) | Assigns .pf-v6-c-menu__item as an option in a set of choices contained by a menu. |
role="none" | .pf-v6-c-menu__list-item | Removes semantic meaning from .pf-v6-c-menu__list-item . |
aria-disabled="true" | .pf-v6-c-menu__item | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. |
tabindex="-1" | a.pf-v6-c-menu__item | When the menu item uses a link element and has aria-disabled="true" passed in, removes it from keyboard focus. This is similar to passing disabled to a menu item that uses a button element. |
aria-hidden="true" | .pf-v6-c-menu__item-icon , .pf-v6-c-menu__item-action-icon , .pf-v6-c-menu__item-external-icon , .pf-v6-c-menu__item-toggle-icon , .pf-v6-c-menu__item-select-icon | Hides the icon from assistive technologies. |
aria-label="Descriptive text" | .pf-v6-c-menu__item-action-icon | There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon. |
aria-label="Not starred" | .pf-v6-c-menu__item-action-icon.pf-m-favorite | Provides an accessible label indicating that the favorite action is not selected. |
aria-label="Starred" | .pf-v6-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited | Provides an accessible label indicating that the favorite action is selected. |
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-menu | <div> | Initiates the menu. Required |
.pf-v6-c-menu__header | <div> | Initiates the menu header container. |
.pf-v6-c-menu__search | <div> | Initiates the menu search container. Use for filtering. |
.pf-v6-c-menu__search-input | <div> | Initiates the menu search input container. |
.pf-v6-c-menu__content | <div> | Initiates the menu content. Use for lists. Required |
.pf-v6-c-menu__list | <ul> | Initiates the menu list. Required |
.pf-v6-c-menu__list-item | <li> | Initiates the menu list item. Required |
.pf-v6-c-menu__item | <button> , <a> , <div> , <label> | Initiates the menu item. Required |
.pf-v6-c-menu__item-main | <span> | Initiates the menu item main container. Required |
.pf-v6-c-menu__item-text | <span> | Initiates the menu item text. Required |
.pf-v6-c-menu__item-check | <span> | Initiates a menu label. |
.pf-v6-c-menu__item-description | <span> | Initiates the menu item description. |
.pf-v6-c-menu__item-group | <section> | Initiates the menu item group. |
.pf-v6-c-menu__item-group-title | <h1> | Initiates the menu item group title. |
.pf-v6-c-menu__item-icon | <span> | Initiates the menu item icon. |
.pf-v6-c-menu__item-toggle-icon | <span> | Initiates the menu item toggle icon. |
.pf-v6-c-menu__item-select-icon | <span> | Initiates the menu item select icon. |
.pf-v6-c-menu__item-action | <button> | Initiates the menu item action. |
.pf-v6-c-menu__item-action-icon | <span> | Initiates the menu item action icon. |
.pf-v6-c-menu__item-external-icon | <span> | Initiates the menu item external icon. |
.pf-v6-c-menu__footer | <div> | Initiates the menu footer. |
.pf-m-hidden{-on-[breakpoint]} | .pf-v6-c-menu__list , .pf-v6-c-menu__list-item , .pf-v6-c-menu__group | Modifies a menu element to be hidden, at optional breakpoint. |
.pf-m-visible{-on-[breakpoint]} | .pf-v6-c-menu__list , .pf-v6-c-menu__list-item , .pf-v6-c-menu__group | Modifies a menu element to be shown, at optional breakpoint. |
.pf-m-favorite | .pf-v6-c-menu__item-action | Modifies the menu item action to handle the favorite icon. |
.pf-m-favorited | .pf-v6-c-menu__item-action.pf-m-favorite | Modifies the menu item action icon to be favorited. |
.pf-m-selected | .pf-v6-c-menu__item | Modifies the menu item to be selected. |
.pf-m-drill-up | .pf-v6-c-menu__list-item | Flags the menu item as a drill up button. |
.pf-m-flyout | .pf-v6-c-menu | Modifies the menu so that all nested .pf-v6-c-menu elements "flyout". |
.pf-m-nav | .pf-v6-c-menu | Modifies the menu for nav variant. |
.pf-m-top | .pf-v6-c-menu | Modifies a flyout menu to expand to the top. |
.pf-m-left | .pf-v6-c-menu | Modifies a flyout menu to expand to the left. |
.pf-m-plain | .pf-v6-c-menu | Modifies the menu component for use in the page instead of as a dropdown. |
.pf-m-scrollable | .pf-v6-c-menu | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting --pf-v6-c-menu__content--MaxHeight . |
.pf-m-current | .pf-v6-c-menu__list-item | Modifies a list item for current styles. |
.pf-m-load | .pf-v6-c-menu__list-item | Modifies a list item for "load more" styles. |
.pf-m-loading | .pf-v6-c-menu__list-item | Modifies a list item for loading styles. |
.pf-m-disabled | .pf-v6-c-menu__item | Modifies a list item for disabled styling. |
.pf-m-aria-disabled | .pf-v6-c-menu__item | Modifies a list item for aria-disabled styling. |
.pf-m-drilldown | .pf-v6-c-menu | Modifies the menu so that all nested .pf-v6-c-menu elements "drill down". |
.pf-m-current-path | .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item | Modifies the menu list item for current path state. |
.pf-m-drilled-in | .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu | Modifies the menu list for drilled in state. |
.pf-m-static | .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu | Modifies the menu list for drilled static state. |
.pf-m-danger | .pf-v6-c-menu__item-text | Modifies a list item for danger styles. |
--pf-v6-c-menu--Width: {width} | .pf-v6-c-menu | Modifies the width of the menu. The default value is auto . |
--pf-v6-c-menu__content--MaxHeight: {height} | .pf-v6-c-menu__content | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
--pf-v6-c-menu__content--Height: {height} | .pf-v6-c-menu | Modifies the height of the drilldown menu content. The default value is auto . |
--pf-v6-c-menu--m-flyout__menu--top-offset | .pf-v6-c-menu | Modifies the menu to allow for an offset to the top positioning. |
--pf-v6-c-menu--m-flyout__menu--left-offset | .pf-v6-c-menu | Modifies the menu to allow for an offset to the left positioning. |
--pf-v6-c-menu--m-flyout__menu--m-left--right-offset | .pf-v6-c-menu.pf-m-flyout > .pf-v6-c-menu | Modifies the menu to allow for an offset to the right positioning. |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--RowGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--Width | auto | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--MinWidth | auto | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--BackgroundColor | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--BoxShadow | 0px
4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--BorderRadius | 6px | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--OutlineOffset | calc(1px * -3) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--ZIndex | 200 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--button--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--icon--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--TransitionDuration | 200ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-plain--BoxShadow | none | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__content--RowGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__content--Height | auto | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__content--MaxHeight | none | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-scrollable__content--MaxHeight | 18.75rem | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__search--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__search--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__search--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__search--PaddingInlineEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__footer--BoxShadow | none | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-scrollable__footer--BoxShadow | 0px
-4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--TransitionDuration | 100ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--TransitionProperty | background-color | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--m-danger--Color | (In light theme) #b1380b | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--m-load__item--Color | (In light theme) #0066cc | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list--divider--MarginBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__list--divider--MarginBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--LineHeight | 1.5 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--FontWeight | 400 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--m-disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__header--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__header--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__header--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__header--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__group-title--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__group-title--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__group-title--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__group-title--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__breadcrumb--PaddingBlockStart | 0 | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__breadcrumb--PaddingBlockEnd | 0 | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__breadcrumb--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__breadcrumb--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__footer--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__footer--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__footer--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__footer--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-main--ColumnGap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__group-title--Color | (In light theme) #4d4d4d | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-description--FontSize | 0.75rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-description--Color | (In light theme) #4d4d4d | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-action--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-action--icon--size | 0.875rem, 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-action--Color | (In light theme) #707070 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-action--m-favorited--Color | (In light theme) #dca614 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-action--button--MinWidth | calc(0.875rem, 0.875rem) + 0.5rem * 2 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-select-icon--Color | (In light theme) #707070 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item--m-selected__item-select-icon--Color | (In light theme) #0066cc | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu__item-external--Color | (In light theme) #0066cc | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--top-offset | 0px | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--left-offset | 0px | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--m-left--right-offset | 0px | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__Zindex | 200 | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--InsetBlockStart | calc(0 * -1 + 0px) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd | auto | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd | auto | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--InsetInlineStart | calc(100% + 0px) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd | calc(0 * -1) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd | calc(100% + 0px) | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height | 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform | 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown__content--Transition | transform 250ms, height 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart | 0 | ||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform | 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown--c-menu--Transition | transform 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform | 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilldown__list--Transition | transform 250ms | ||
| ||||
:where(:root, .pf-v6-c-menu) | --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex | 100 | ||
| ||||
.pf-v6-c-menu__list | --pf-v6-hidden-visible--visible--Display | grid | ||
.pf-v6-c-menu__list | --pf-v6-hidden-visible--hidden--Display | none | ||
.pf-v6-c-menu__list | --pf-v6-hidden-visible--Display | flex | ||
| ||||
.pf-v6-c-menu__list.pf-m-hidden | --pf-v6-hidden-visible--Display | none | ||
| ||||
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-toggle-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-external-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-description--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__list-item--BackgroundColor | transparent | ||
.pf-v6-c-menu.pf-m-top | --pf-v6-c-menu--m-flyout__menu--InsetBlockStart | auto | ||
.pf-v6-c-menu.pf-m-top | --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd | calc(0 * -1) | ||
| ||||
.pf-v6-c-menu.pf-m-left | --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd | calc(100% + 0px) | ||
| ||||
.pf-v6-c-menu.pf-m-left | --pf-v6-c-menu--m-flyout__menu--InsetInlineStart | auto | ||
.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list | --pf-v6-c-menu__list--PaddingBlockStart | 0 | ||
.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list | --pf-v6-c-menu__list--PaddingBlockEnd | 0 | ||
.pf-v6-c-menu.pf-m-plain | --pf-v6-c-menu--BoxShadow | none | ||
| ||||
.pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__content--MaxHeight | 18.75rem | ||
| ||||
.pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--BoxShadow | 0px
-4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
.pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--PaddingBlockStart | calc(0.5rem + 0.5rem) | ||
| ||||
.pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--PaddingBlockEnd | calc(0.5rem + 0.5rem) | ||
| ||||
.pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) | --pf-v6-c-menu--PaddingBlockEnd | 0 | ||
.pf-v6-c-menu__content .pf-v6-c-menu__content | --pf-v6-c-menu__content--Height | auto | ||
.pf-v6-c-menu__list-item.pf-m-load | --pf-v6-c-menu__item--Color | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-menu__list-item.pf-m-danger | --pf-v6-c-menu__item--Color | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) | --pf-v6-c-menu__item--Color | undefined, #b1380b | ||
| ||||
.pf-v6-c-menu__list-item.pf-m-focus | --pf-v6-c-menu__list-item--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-menu__item | --pf-v6-hidden-visible--visible--Display | flex | ||
.pf-v6-c-menu__item | --pf-v6-hidden-visible--hidden--Display | none | ||
.pf-v6-c-menu__item | --pf-v6-hidden-visible--Display | flex | ||
| ||||
.pf-v6-c-menu__item.pf-m-hidden | --pf-v6-hidden-visible--Display | none | ||
| ||||
.pf-v6-c-menu__item.pf-m-selected | --pf-v6-c-menu__item-select-icon--Color | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-menu__item-check .pf-v6-c-check | --pf-v6-c-check__input--TranslateY | none | ||
.pf-v6-c-menu__item-toggle-icon.pf-m-favorited | --pf-v6-c-button--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-menu__item-toggle-icon.pf-m-favorited | --pf-v6-c-menu__item-action--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-menu__breadcrumb | --pf-v6-c-breadcrumb__item--FontSize | undefined | ||
| ||||
.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle | --pf-v6-c-menu-toggle--BorderWidth | 0 | ||
.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle | --pf-v6-c-menu-toggle--BorderColor | transparent |