Overflow menu

The OverFlow Menu groups a set of actions in a responsive horizontal list. Actions can be set to persist or collapse into a kebab as the viewport shrinks. Overflow Menus are useful in toolbars or other places where a group of actions are required. Related design guidelines: Toolbar

Examples Props CSS Variables

Examples

Simple (responsive)

Group types

Multiple groups

Persistent

Props

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

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

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

OverflowMenuDropdownItem properties
Name	Type	Required	Default	Description
children	any	No		Any elements that can be rendered in the menu
isShared	boolean	No	false	Indicates when a dropdown item shows and hides the corresponding list item

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

OverflowMenuItem properties
Name	Type	Required	Default	Description
children	any	No		Any elements that can be rendered in the menu
className	string	No		Additional classes added to the OverflowMenuItem
isPersistent	boolean	No	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