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)

Group types

Multiple groups

Persistent

Props

OverflowMenu

*required
Name	Type	Description
breakpointrequired	'md' \| 'lg' \| 'xl' \| '2xl'	Indicates breakpoint at which to switch between horizontal menu and vertical dropdown
children	any	Any elements that can be rendered in the menu
className	string	Additional classes added to the OverflowMenu.

OverflowMenuContent

*required
Name	Type	Description
children	any	Any elements that can be rendered in the menu
className	string	Additional classes added to the OverflowMenuContent
isPersistent	boolean	Modifies the overflow menu content visibility

OverflowMenuControl

*required
Name	Type	Description
children	any	Any elements that can be rendered in the menu
className	string	Additional classes added to the OverflowMenuControl
hasAdditionalOptions	boolean	Triggers the overflow dropdown to persist at all viewport sizes

OverflowMenuDropdownItem

*required
Name	Type	Default	Description
index	number		Indicates the index of the list item
isShared	boolean	false	Indicates when a dropdown item shows and hides the corresponding list item

OverflowMenuGroup

*required
Name	Type	Default	Description
children	any		Any elements that can be rendered in the menu
className	string		Additional classes added to the OverflowMenuGroup
groupType	'button' \| 'icon'		Indicates a button or icon group
isPersistent	boolean	false	Modifies the overflow menu group visibility

OverflowMenuItem

*required
Name	Type	Default	Description
children	any		Any elements that can be rendered in the menu
className	string		Additional classes added to the OverflowMenuItem
isPersistent	boolean	false	Modifies the overflow menu item visibility

CSS variables


	.pf-c-overflow-menu	--pf-c-overflow-menu--spacer--base	1rem
--pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu	--pf-c-overflow-menu--spacer	0.5rem
--pf-c-overflow-menu--spacer --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-overflow-menu	--pf-c-overflow-menu__group--spacer	1rem
--pf-c-overflow-menu__group--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu	--pf-c-overflow-menu__item--spacer	1rem
--pf-c-overflow-menu__item--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu	--pf-c-overflow-menu--c-divider--m-vertical--spacer	1rem
--pf-c-overflow-menu--c-divider--m-vertical--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu	--pf-c-overflow-menu__group--m-button-group--spacer	1rem
--pf-c-overflow-menu__group--m-button-group--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu	--pf-c-overflow-menu__group--m-button-group--space-items	0.5rem
--pf-c-overflow-menu__group--m-button-group--space-items --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-overflow-menu	--pf-c-overflow-menu__group--m-icon-button-group--spacer	1rem
--pf-c-overflow-menu__group--m-icon-button-group--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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--spacer --pf-c-overflow-menu__group--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu__group.pf-m-button-group	--pf-c-overflow-menu--spacer	1rem
--pf-c-overflow-menu--spacer --pf-c-overflow-menu__group--m-button-group--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu__group.pf-m-button-group > *	--pf-c-overflow-menu--spacer	0.5rem
--pf-c-overflow-menu--spacer --pf-c-overflow-menu__group--m-button-group--space-items --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-overflow-menu__group.pf-m-icon-button-group	--pf-c-overflow-menu--spacer	1rem
--pf-c-overflow-menu--spacer --pf-c-overflow-menu__group--m-icon-button-group--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu__group.pf-m-icon-button-group > *	--pf-c-overflow-menu--spacer	0
--pf-c-overflow-menu--spacer --pf-c-overflow-menu__group--m-icon-button-group--space-items 0
	.pf-c-overflow-menu__item	--pf-c-overflow-menu--spacer	1rem
--pf-c-overflow-menu--spacer --pf-c-overflow-menu__item--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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--spacer --pf-c-overflow-menu--c-divider--m-vertical--spacer --pf-c-overflow-menu--spacer--base --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child	--pf-c-overflow-menu--spacer	0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines