Introduction
The overflow menu component condenses actions inside .pf-v6-c-overflow-menu__content container into a single menu button wrapped in .pf-v6-c-overflow-menu__control.
The overflow menu relies on groups (.pf-v6-c-overflow-menu__group) and items (.pf-v6-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-v6-c-toolbar--spacer--base, whose value is --pf-v6-global--spacer--md or 16px.
Default spacing for items and groups:
Class | CSS Variable | Computed Value |
|---|---|---|
.pf-v6-c-overflow-menu__group | --pf-v6-c-overflow-menu__group--spacer | 16px |
.pf-v6-c-overflow-menu__item | --pf-v6-c-overflow-menu__item--spacer | 16px |
Overflow menu item types
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-overflow-menu | <div> | Initiates an overflow menu. Required |
.pf-v6-c-overflow-menu__content | <div> | Initiates an overflow menu content section. Required |
.pf-v6-c-overflow-menu__control | <div> | Initiates the overflow menu control. Required |
.pf-v6-c-overflow-menu__group | <div> | Initiates an overflow menu group. |
.pf-v6-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 menu.
Overflow menu group types
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-overflow-menu__group | <div> | Initiates an overflow menu component group. |
.pf-m-button-group | .pf-v6-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v6-c-overflow-menu__group--m-button-group--spacer). Child .pf-v6-c-button spacer value is set to var(--pf-v6-c-overflow-menu__group--m-button-group--space-items). |
.pf-m-icon-button-group | .pf-v6-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer). Child .pf-v6-c-button.pf-m-button-plain spacer value is set to var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items). |
Persistent configuration
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-overflow-menu | <div> | Initiates an overflow menu. Required |
.pf-v6-c-overflow-menu__content | <div> | Initiates an overflow menu content section. Required |
.pf-v6-c-overflow-menu__control | <div> | Initiates the overflow menu control. Required |
.pf-v6-c-overflow-menu__group | <div> | Initiates an overflow menu group. |
.pf-v6-c-overflow-menu__item | <div> | Initiates an overflow menu item. Required |
.pf-m-button-group | .pf-v6-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v6-c-overflow-menu__group--m-button-group--spacer). Child spacer value is set to var(--pf-v6-c-overflow-menu__group--m-button-group--space-items). |
.pf-m-icon-button-group | .pf-v6-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer). Child spacer value is set to var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items). |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-overflow-menu) | --pf-v6-c-overflow-menu--ColumnGap | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-overflow-menu) | --pf-v6-c-overflow-menu__group--ColumnGap | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-overflow-menu) | --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-overflow-menu) | --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap | 0.25rem | ||
| ||||
