PatternFly

Overflow menu

An overflow menu groups a set of actions in a responsive horizontal list to help declutter an interface. Actions can be set to persist or collapse into a kebab as the viewpoint shrinks. Overflow menus are useful in toolbars or other places where a group of actions is required.

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.

Simple collapsed

Simple expanded

Item 1
Item 2
Item 3
Item 4
Item 5

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

Group types

Item 1
Item 2
Item 3

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).

Additional options in dropdown (hidden)

Additional options in dropdown (visible)

Persistent configuration

Persistent additional options (hidden)

Persistent additional options (visible)

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 columnSelectorVariableValue
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu--spacer--base
1rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu--spacer
0.5rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu__group--spacer
1rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu__item--spacer
1rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer
1rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu__group--m-button-group--spacer
1rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu__group--m-button-group--space-items
0.5rem
.pf-v5-c-overflow-menu--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer
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__group.pf-m-button-group--pf-v5-c-overflow-menu--spacer
1rem
.pf-v5-c-overflow-menu__group.pf-m-button-group > *--pf-v5-c-overflow-menu--spacer
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__group.pf-m-icon-button-group > *--pf-v5-c-overflow-menu--spacer
0
.pf-v5-c-overflow-menu__item--pf-v5-c-overflow-menu--spacer
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 > .pf-v5-c-divider.pf-m-vertical:last-child--pf-v5-c-overflow-menu--spacer
0

View source on GitHub