Skip to Content
Patternfly Logo

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

ExamplesPropsCSS Variables

Examples

Simple (responsive)

Item
Item
Item
Item
Item

Group types

Item
Item
Item

Multiple groups

Persistent

Props

OverflowMenu properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenu.
breakpoint'md' | 'lg' | 'xl' | '2xl'YesIndicates breakpoint at which to switch between horizontal menu and vertical dropdown
OverflowMenuContent properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenuContent
isPersistentbooleanNoModifies the overflow menu content visibility
OverflowMenuControl properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenuControl
hasAdditionalOptionsbooleanNoTriggers the overflow dropdown to persist at all viewport sizes
OverflowMenuDropdownItem properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
isSharedbooleanNofalseIndicates when a dropdown item shows and hides the corresponding list item
indexnumberNoIndicates the index of the list item
OverflowMenuGroup properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenuGroup
isPersistentbooleanNofalseModifies the overflow menu group visibility
groupType'button' | 'icon'NoIndicates a button or icon group
OverflowMenuItem properties
NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenuItem
isPersistentbooleanNofalseModifies the overflow menu item visibility

CSS Variables

.pf-c-overflow-menu--pf-c-overflow-menu--spacer--basec_overflow_menu_spacer_base
1rem
.pf-c-overflow-menu--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0.5rem
.pf-c-overflow-menu--pf-c-overflow-menu__group--spacerc_overflow_menu__group_spacer
1rem
.pf-c-overflow-menu--pf-c-overflow-menu__item--spacerc_overflow_menu__item_spacer
1rem
.pf-c-overflow-menu--pf-c-overflow-menu--c-divider--m-vertical--spacerc_overflow_menu_c_divider_m_vertical_spacer
1rem
.pf-c-overflow-menu--pf-c-overflow-menu__group--m-button-group--spacerc_overflow_menu__group_m_button_group_spacer
1rem
.pf-c-overflow-menu--pf-c-overflow-menu__group--m-button-group--space-itemsc_overflow_menu__group_m_button_group_space_items
0.5rem
.pf-c-overflow-menu--pf-c-overflow-menu__group--m-icon-button-group--spacerc_overflow_menu__group_m_icon_button_group_spacer
1rem
.pf-c-overflow-menu--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--pf-c-overflow-menu--spacerc_overflow_menu_spacer
1rem
.pf-c-overflow-menu__group.pf-m-button-group--pf-c-overflow-menu--spacerc_overflow_menu_spacer
1rem
.pf-c-overflow-menu__group.pf-m-button-group > *--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0.5rem
.pf-c-overflow-menu__group.pf-m-icon-button-group--pf-c-overflow-menu--spacerc_overflow_menu_spacer
1rem
.pf-c-overflow-menu__group.pf-m-icon-button-group > *--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0
.pf-c-overflow-menu__item--pf-c-overflow-menu--spacerc_overflow_menu_spacer
1rem
.pf-c-overflow-menu__content:last-child--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0
.pf-c-overflow-menu > .pf-c-divider--pf-c-overflow-menu--spacerc_overflow_menu_spacer
1rem
.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0