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

Overflow menu simple (responsive)

Copied to clipboard

Overflow menu group types

Copied to clipboard

Overflow menu multiple groups - additional options

Copied to clipboard

Overflow menu persistent - additional options

Copied to clipboard

Props

OverflowMenu props

The OverflowMenu component accepts the following props.

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 props

The OverflowMenuContent component accepts the following props.

NameTypeRequiredDefaultDescription

OverflowMenuControl props

The OverflowMenuControl component accepts the following props.

NameTypeRequiredDefaultDescription

OverflowMenuDropdownItem props

The OverflowMenuDropdownItem component accepts the following props.

NameTypeRequiredDefaultDescription
isSharedfalse

OverflowMenuItem props

The OverflowMenuItem component accepts the following props.

NameTypeRequiredDefaultDescription
isPersistentfalse

OverflowMenuGroup props

The OverflowMenuGroup component accepts the following props.

NameTypeRequiredDefaultDescription
isPersistentfalse
groupType''

CSS variables

--pf-c-overflow-menu__control--Displayc_overflow_menu__control_Displaynone
--pf-c-overflow-menu__control--Visibilityc_overflow_menu__control_Visibilityhidden
--pf-c-overflow-menu__control--spacerc_overflow_menu__control_spacervar(--pf-global--spacer--sm)
--pf-c-overflow-menu__group--Displayc_overflow_menu__group_Displayflex
--pf-c-overflow-menu__group--Visibilityc_overflow_menu__group_Visibilityvisible
--pf-c-overflow-menu__group--m-button-group--space-itemsc_overflow_menu__group_m_button_group_space_itemsvar(--pf-global--spacer--sm)
--pf-c-overflow-menu__group--m-button-group--spacerc_overflow_menu__group_m_button_group_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu__group--m-icon-button-group--space-itemsc_overflow_menu__group_m_icon_button_group_space_items0
--pf-c-overflow-menu__group--m-icon-button-group--spacerc_overflow_menu__group_m_icon_button_group_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu__group--spacerc_overflow_menu__group_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu__item--Displayc_overflow_menu__item_Displayinline-block
--pf-c-overflow-menu__item--Visibilityc_overflow_menu__item_Visibilityvisible
--pf-c-overflow-menu__item--spacerc_overflow_menu__item_spacervar(--pf-global--spacer--md)
--pf-c-overflow-menu--spacerc_overflow_menu_spacervar(--pf-global--spacer--sm)
--pf-c-overflow-menu--spacer--basec_overflow_menu_spacer_basevar(--pf-global--spacer--md)