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

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.

Props

OverflowMenu

*required
Name	Type	Description
breakpointrequired	'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	Indicates breakpoint at which to switch between horizontal menu and vertical dropdown
breakpointReference	HTMLElement \| (() => HTMLElement) \| React.RefObject<any>	A container reference to base the specified breakpoint on instead of the viewport width.
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
isShared	boolean	false	Indicates when a dropdown item shows and hides the corresponding list item
itemId	string \| number		Identifies the component in the dropdown onSelect callback

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

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu--spacer--base	1rem
--pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu--spacer	0.5rem
--pf-v5-c-overflow-menu--spacer --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu__group--spacer	1rem
--pf-v5-c-overflow-menu__group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu__item--spacer	1rem
--pf-v5-c-overflow-menu__item--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer	1rem
--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu__group--m-button-group--spacer	1rem
--pf-v5-c-overflow-menu__group--m-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu__group--m-button-group--space-items	0.5rem
--pf-v5-c-overflow-menu__group--m-button-group--space-items --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer	1rem
--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu	--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items	0
	.pf-v5-c-overflow-menu__group	--pf-v5-c-overflow-menu--spacer	1rem
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu__group.pf-m-button-group	--pf-v5-c-overflow-menu--spacer	1rem
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu__group.pf-m-button-group > *	--pf-v5-c-overflow-menu--spacer	0.5rem
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-button-group--space-items --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-overflow-menu__group.pf-m-icon-button-group	--pf-v5-c-overflow-menu--spacer	1rem
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu__group.pf-m-icon-button-group > *	--pf-v5-c-overflow-menu--spacer	0
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items 0
	.pf-v5-c-overflow-menu__item	--pf-v5-c-overflow-menu--spacer	1rem
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu__item--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu__content:last-child	--pf-v5-c-overflow-menu--spacer	0
	.pf-v5-c-overflow-menu > .pf-v5-c-divider	--pf-v5-c-overflow-menu--spacer	1rem
--pf-v5-c-overflow-menu--spacer --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer --pf-v5-c-overflow-menu--spacer--base --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child	--pf-v5-c-overflow-menu--spacer	0

View source on GitHub