HTML

Overflow menu

Info alert:Experimental feature

This is an experimental feature in the early stages of testing. It's not intended for production use.
ExamplesDocumentationCSS Variables

Examples

Overflow menu simple (responsive)

Copied to clipboard

Overflow menu group types

Copied to clipboard

Overflow menu multiple groups - additional options

Copied to clipboard

Overflow menu persistent - additional options

Copied to clipboard

Documentation

Accessibility

Attribute Applied to Outcome
hidden .pf-c-overflow-menu__item, .pf-c-overflow-menu__group, .pf-c-overflow-menu__shared-item Indicates that the overflow menu element is hidden. Required

Usage

Class Applied to Outcome
.pf-c-overflow-menu <div> Initiates the overflow menu component. Required
.pf-c-overflow-menu__item <div> Initiates an overflow menu item. Required
.pf-c-overflow-menu__group <div> Initiates an overflow menu group.
.pf-c-overflow-menu__content <div> Initiates an overflow menu content container.
.pf-c-overflow-menu__control <div> Initiates an overflow menu control element.
.pf-c-overflow-menu__shared-item .pf-c-dropdown__menu > li Initiates a shared item element. This class controls when a member of the .pf-c-overflow-menu__control dropdown shows and hides the list item.
.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).
.pf-m-additional-options .pf-c-overflow-menu__control Modifies overflow menu control visibility.
.pf-m-persistent .pf-c-overflow-menu__item, .pf-c-overflow-menu__group Modifies overflow menu group/item visibility.
.pf-m-show{-on-[md, lg, xl]} .pf-c-overflow-menu Specifies at which breakpoint overflow menu items and groups are shown. Required

CSS Variables

--pf-c-overflow-menu__control--Displayc_overflow_menu__control_Displaynone
--pf-c-overflow-menu__control--Visibilityc_overflow_menu__control_Visibilityhidden
--pf-c-overflow-menu__control--spacerc_overflow_menu__control_spacervar(--pf-global--spacer--sm)
--pf-c-overflow-menu__group--Displayc_overflow_menu__group_Displayflex
--pf-c-overflow-menu__group--Visibilityc_overflow_menu__group_Visibilityvisible
--pf-c-overflow-menu__group--m-button-group--space-itemsc_overflow_menu__group_m_button_group_space_itemsvar(--pf-global--spacer--sm)
--pf-c-overflow-menu__group--m-button-group--spacerc_overflow_menu__group_m_button_group_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu__group--m-icon-button-group--space-itemsc_overflow_menu__group_m_icon_button_group_space_items0
--pf-c-overflow-menu__group--m-icon-button-group--spacerc_overflow_menu__group_m_icon_button_group_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu__group--spacerc_overflow_menu__group_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu__item--Displayc_overflow_menu__item_Displayinline-block
--pf-c-overflow-menu__item--Visibilityc_overflow_menu__item_Visibilityvisible
--pf-c-overflow-menu__item--spacerc_overflow_menu__item_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu--spacerc_overflow_menu_spacervar(--pf-global--spacer--sm)
--pf-c-overflow-menu--spacer--basec_overflow_menu_spacer_basevar(--pf-global--spacer--md)