Skip to content
Patternfly Logo

Overflow menu

Examples

Simple (responsive)

Item
Item
Item
Item
Item

Group types

Item
Item
Item

Multiple groups

Persistent

Props

OverflowMenu

*required
NameTypeDefaultDescription
breakpointrequired'md' | 'lg' | 'xl' | '2xl'Indicates breakpoint at which to switch between horizontal menu and vertical dropdown
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