React

OverflowMenu

Info alert:Experimental feature

This is an experimental feature in the early stages of testing. It's not intended for production use.
ExamplesPropsCSS Variables

Examples

Simple (responsive)

Item
Item
Item
Item
Item

Group types

Item
Item
Item

Multiple groups

Persistent

Props

OverflowMenu properties
NameTypeRequiredDefaultDescription
childrenanyAny elements that can be rendered in the menu
classNamestringAdditional classes added to the OverflowMenu.
breakpoint'md' | 'lg' | 'xl'Indicates breakpoint at which to switch between horizontal menu and vertical dropdown
OverflowMenuContent properties
NameTypeRequiredDefaultDescription
OverflowMenuControl properties
NameTypeRequiredDefaultDescription
OverflowMenuDropdownItem properties
NameTypeRequiredDefaultDescription
isSharedfalsenull
OverflowMenuGroup properties
NameTypeRequiredDefaultDescription
isPersistentfalsenull
groupType''null
OverflowMenuItem properties
NameTypeRequiredDefaultDescription
isPersistentfalsenull

CSS Variables

--pf-c-overflow-menu__group--m-button-group--space-itemsc_overflow_menu__group_m_button_group_space_items
var(--pf-global--spacer--sm)
--pf-c-overflow-menu__group--m-button-group--spacerc_overflow_menu__group_m_button_group_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu__group--m-icon-button-group--space-itemsc_overflow_menu__group_m_icon_button_group_space_items
0
--pf-c-overflow-menu__group--m-icon-button-group--spacerc_overflow_menu__group_m_icon_button_group_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu__group--spacerc_overflow_menu__group_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu__item--spacerc_overflow_menu__item_spacer
var(--pf-global--spacer--md)
--pf-c-overflow-menu--spacerc_overflow_menu_spacer
0
--pf-c-overflow-menu--spacer--basec_overflow_menu_spacer_base
var(--pf-global--spacer--md)