Skip to content
PatternFly logo

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.

Examples

Simple (responsive)

Item
Item
Item
Item
Item

Group types

Item
Item
Item

Multiple groups

Persistent

Breakpoint on container

By passing in the breakpointReference property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.

You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.

Current container width: 100 %
Item 1
Item 2
Item 3
Item 4
Item 5

Props

OverflowMenu

*required
NameTypeDefaultDescription
breakpointrequired'sm' | 'md' | 'lg' | 'xl' | '2xl'Indicates breakpoint at which to switch between horizontal menu and vertical dropdown
breakpointReferenceHTMLElement | (() => HTMLElement) | React.RefObject<any>A container reference to base the specified breakpoint on instead of the viewport width.
childrenanyAny elements that can be rendered in the menu
classNamestringAdditional classes added to the OverflowMenu.

OverflowMenuContent

*required
NameTypeDefaultDescription
childrenanyAny elements that can be rendered in the menu
classNamestringAdditional classes added to the OverflowMenuContent
isPersistentbooleanModifies the overflow menu content visibility

OverflowMenuControl

*required
NameTypeDefaultDescription
childrenanyAny elements that can be rendered in the menu
classNamestringAdditional classes added to the OverflowMenuControl
hasAdditionalOptionsbooleanTriggers the overflow dropdown to persist at all viewport sizes

OverflowMenuDropdownItem

*required
NameTypeDefaultDescription
indexnumberIndicates the index of the list item
isSharedbooleanfalseIndicates when a dropdown item shows and hides the corresponding list item

OverflowMenuGroup

*required
NameTypeDefaultDescription
childrenanyAny elements that can be rendered in the menu
classNamestringAdditional classes added to the OverflowMenuGroup
groupType'button' | 'icon'Indicates a button or icon group
isPersistentbooleanfalseModifies the overflow menu group visibility

OverflowMenuItem

*required
NameTypeDefaultDescription
childrenanyAny elements that can be rendered in the menu
classNamestringAdditional classes added to the OverflowMenuItem
isPersistentbooleanfalseModifies the overflow menu item visibility

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

View source on GitHub