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

NameTypeRequiredDefaultDescription
breakpoint'md' | 'lg' | 'xl' | '2xl'YesIndicates breakpoint at which to switch between horizontal menu and vertical dropdown
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenu.

OverflowMenuContent

NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenuContent
isPersistentbooleanNoModifies the overflow menu content visibility

OverflowMenuControl

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

NameTypeRequiredDefaultDescription
indexnumberNoIndicates the index of the list item
isSharedbooleanNofalseIndicates when a dropdown item shows and hides the corresponding list item

OverflowMenuGroup

NameTypeRequiredDefaultDescription
childrenanyNoAny elements that can be rendered in the menu
classNamestringNoAdditional classes added to the OverflowMenuGroup
groupType'button' | 'icon'NoIndicates a button or icon group
isPersistentbooleanNofalseModifies the overflow menu group visibility

OverflowMenuItem

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--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