Introduction
The overflow menu component condenses actions inside .pf-v5-c-overflow-menu__content container into a single dropdown button wrapped in .pf-v5-c-overflow-menu__control.
The overflow menu relies on groups (.pf-v5-c-overflow-menu__group) and items (.pf-v5-c-overflow-menu__item), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to --pf-v5-c-toolbar--spacer--base, whose value is --pf-v5-global--spacer--md or 16px.
Default spacing for items and groups:
Class | CSS Variable | Computed Value |
|---|---|---|
.pf-v5-c-overflow-menu__group | --pf-v5-c-overflow-menu__group--spacer | 16px |
.pf-v5-c-overflow-menu__item | --pf-v5-c-overflow-menu__item--spacer | 16px |
Overflow menu item types
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-overflow-menu | <div> | Initiates an overflow menu. Required |
.pf-v5-c-overflow-menu__content | <div> | Initiates an overflow menu content section. Required |
.pf-v5-c-overflow-menu__control | <div> | Initiates the overflow menu control. Required |
.pf-v5-c-overflow-menu__group | <div> | Initiates an overflow menu group. |
.pf-v5-c-overflow-menu__item | <div> | Initiates an overflow menu item. Required |
The action group consists of a primary and secondary action. Any additional actions are part of the overflow control dropdown.
Overflow menu group types
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-overflow-menu__group | <div> | Initiates an overflow menu component group. |
.pf-m-button-group | .pf-v5-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v5-c-overflow-menu__group--m-button-group--spacer). Child .pf-v5-c-button spacer value is set to var(--pf-v5-c-overflow-menu__group--m-button-group--space-items). |
.pf-m-icon-button-group | .pf-v5-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer). Child .pf-v5-c-button.pf-m-button-plain spacer value is set to var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items). |
Persistent configuration
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-overflow-menu | <div> | Initiates an overflow menu. Required |
.pf-v5-c-overflow-menu__content | <div> | Initiates an overflow menu content section. Required |
.pf-v5-c-overflow-menu__control | <div> | Initiates the overflow menu control. Required |
.pf-v5-c-overflow-menu__group | <div> | Initiates an overflow menu group. |
.pf-v5-c-overflow-menu__item | <div> | Initiates an overflow menu item. Required |
.pf-m-button-group | .pf-v5-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v5-c-overflow-menu__group--m-button-group--spacer). Child spacer value is set to var(--pf-v5-c-overflow-menu__group--m-button-group--space-items). |
.pf-m-icon-button-group | .pf-v5-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer). Child spacer value is set to var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items). |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu--spacer--base | 1rem | ||
--pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu--spacer | 0.5rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu__group--spacer | 1rem | ||
--pf-v5-c-overflow-menu__group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu__item--spacer | 1rem | ||
--pf-v5-c-overflow-menu__item--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer | 1rem | ||
--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu__group--m-button-group--spacer | 1rem | ||
--pf-v5-c-overflow-menu__group--m-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu__group--m-button-group--space-items | 0.5rem | ||
--pf-v5-c-overflow-menu__group--m-button-group--space-items --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer | 1rem | ||
--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu | --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items | 0 | ||
| .pf-v5-c-overflow-menu__group | --pf-v5-c-overflow-menu--spacer | 1rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu__group.pf-m-button-group | --pf-v5-c-overflow-menu--spacer | 1rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu__group.pf-m-button-group > * | --pf-v5-c-overflow-menu--spacer | 0.5rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-button-group--space-items --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-overflow-menu__group.pf-m-icon-button-group | --pf-v5-c-overflow-menu--spacer | 1rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu__group.pf-m-icon-button-group > * | --pf-v5-c-overflow-menu--spacer | 0 | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items 0 | ||||
| .pf-v5-c-overflow-menu__item | --pf-v5-c-overflow-menu--spacer | 1rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__item--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu__content:last-child | --pf-v5-c-overflow-menu--spacer | 0 | ||
| .pf-v5-c-overflow-menu > .pf-v5-c-divider | --pf-v5-c-overflow-menu--spacer | 1rem | ||
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child | --pf-v5-c-overflow-menu--spacer | 0 | ||
View source on GitHub
