HTML

Overflow menu

IntroductionPersistent configurationCSS Variables

Introduction

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.

Simple collapsed

Simple expanded

Item 1
Item 2
Item 3
Item 4
Item 5

Default spacing for items and groups:

ClassCSS VariableComputed Value
.pf-c-overflow-menu__group--pf-c-overflow-menu__group--spacer16px
.pf-c-overflow-menu__item--pf-c-overflow-menu__item--spacer16px

Overflow menu item types

ClassApplied toOutcome
.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

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

ClassApplied toOutcome
.pf-c-overflow-menu__group<div>Initiates an overflow menu component group.
.pf-m-button-group.pf-c-overflow-menu__groupModifies 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__groupModifies 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).

Additional options in dropdown (hidden)

Additional options in dropdown (visible)

Persistent configuration

Persistent additional options (hidden)

Persistent additional options (visible)

Usage

ClassApplied toOutcome
.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-c-overflow-menu__separator<li>Defines a separator within the menu.
.pf-m-button-group.pf-c-overflow-menu__groupModifies 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__groupModifies 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__group--m-button-group--space-itemsc_overflow_menu__group_m_button_group_space_items
var(--pf-global--spacer--sm)
--pf-c-overflow-menu__group--m-button-group--spacerc_overflow_menu__group_m_button_group_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu__group--m-icon-button-group--space-itemsc_overflow_menu__group_m_icon_button_group_space_items
0
--pf-c-overflow-menu__group--m-icon-button-group--spacerc_overflow_menu__group_m_icon_button_group_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu__group--spacerc_overflow_menu__group_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu__item--spacerc_overflow_menu__item_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0
--pf-c-overflow-menu--spacer--basec_overflow_menu_spacer_base
var(--pf-global--spacer--md)