Patternfly Logo

Examples

Simple (responsive)

Item
Item
Item
Item
Item

Group types

Item
Item
Item

Multiple groups

Persistent

Props

OverflowMenu properties
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 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
indexnumberNoIndicates the index of the list item
isSharedbooleanNofalseIndicates when a dropdown item shows and hides the corresponding list item
OverflowMenuGroup properties
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 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--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