Overflow menu
The OverFlow Menu groups a set of actions in a responsive horizontal list. Actions can be set to persist or collapse into a kebab as the viewport shrinks. Overflow Menus are useful in toolbars or other places where a group of actions are required. Related design guidelines: Toolbar
IntroductionPersistent configurationCSS VariablesIntroduction
The overflow menu component condenses actions inside .pf-c-overflow-menu__content container into a single dropdown button wrapped in .pf-c-overflow-menu__control.
The overflow menu relies on groups (.pf-c-overflow-menu__group) and items (.pf-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-c-data-toolbar--spacer--base, whose value is --pf-global--spacer--md or 16px.
Default spacing for items and groups:
| Class | CSS Variable | Computed Value |
|---|---|---|
.pf-c-overflow-menu__group | --pf-c-overflow-menu__group--spacer | 16px |
.pf-c-overflow-menu__item | --pf-c-overflow-menu__item--spacer | 16px |
Overflow menu item types
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-overflow-menu | <div> | Initiates an overflow menu. Required |
.pf-c-overflow-menu__content | <div> | Initiates an overflow menu content section. Required |
.pf-c-overflow-menu__control | <div> | Initiates the overflow menu control. Required |
.pf-c-overflow-menu__group | <div> | Initiates an overflow menu group. |
.pf-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-c-overflow-menu__group | <div> | Initiates an overflow menu component group. |
.pf-m-button-group | .pf-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-c-overflow-menu__group--m-button-group--spacer). Child .pf-c-button spacer value is set to var(--pf-c-overflow-menu__group--m-button-group--space-items). |
.pf-m-icon-button-group | .pf-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-c-overflow-menu__group--m-icon-button-group--spacer). Child .pf-c-button.pf-m-button-plain spacer value is set to var(--pf-c-overflow-menu__group--m-icon-button-group--space-items). |
Persistent configuration
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-overflow-menu | <div> | Initiates an overflow menu. Required |
.pf-c-overflow-menu__content | <div> | Initiates an overflow menu content section. Required |
.pf-c-overflow-menu__control | <div> | Initiates the overflow menu control. Required |
.pf-c-overflow-menu__group | <div> | Initiates an overflow menu group. |
.pf-c-overflow-menu__item | <div> | Initiates an overflow menu item. Required |
.pf-m-button-group | .pf-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-c-overflow-menu__group--m-button-group--spacer). Child spacer value is set to var(--pf-c-overflow-menu__group--m-button-group--space-items). |
.pf-m-icon-button-group | .pf-c-overflow-menu__group | Modifies overflow menu group spacing. Spacer value is set to var(--pf-c-overflow-menu__group--m-icon-button-group--spacer). Child spacer value is set to var(--pf-c-overflow-menu__group--m-icon-button-group--space-items). |
CSS Variables
| .pf-c-overflow-menu | --pf-c-overflow-menu--spacer--base | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu--spacer | 0.5rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__item--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu--c-divider--m-vertical--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-button-group--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-button-group--space-items | 0.5rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-icon-button-group--spacer | 1rem | ||
| .pf-c-overflow-menu | --pf-c-overflow-menu__group--m-icon-button-group--space-items | 0 | ||
| .pf-c-overflow-menu__group | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__group.pf-m-button-group | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__group.pf-m-button-group > * | --pf-c-overflow-menu--spacer | 0.5rem | ||
| .pf-c-overflow-menu__group.pf-m-icon-button-group | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__group.pf-m-icon-button-group > * | --pf-c-overflow-menu--spacer | 0 | ||
| .pf-c-overflow-menu__item | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu__content:last-child | --pf-c-overflow-menu--spacer | 0 | ||
| .pf-c-overflow-menu > .pf-c-divider | --pf-c-overflow-menu--spacer | 1rem | ||
| .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child | --pf-c-overflow-menu--spacer | 0 | ||
