- React
- HTML

import ’./overflow-menu.css’

## Introduction

The overflow menu component condenses actions inside `.pf-v6-c-overflow-menu__content` container into a single menu button wrapped in `.pf-v6-c-overflow-menu__control`.

The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (`.pf-v6-c-overflow-menu__item`), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to `--pf-v6-c-toolbar--spacer--base`, whose value is `--pf-v6-global--spacer--md` or 16px.

### Simple condensed

### Simple

### Default spacing for items and groups:

Class | CSS Variable | Computed Value
--- | --- | ---
`.pf-v6-c-overflow-menu__group` | `--pf-v6-c-overflow-menu__group--spacer` | `16px`
`.pf-v6-c-overflow-menu__item` | `--pf-v6-c-overflow-menu__item--spacer` | `16px`

### Overflow menu item types

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-overflow-menu` | `<div>` | Initiates an overflow menu. Required
`.pf-v6-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. Required
`.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. Required
`.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group.
`.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. Required

### Group types

The action group consists of a primary and secondary action. Any additional actions are part of the overflow control menu.

### Overflow menu group types

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu component group.
`.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child `.pf-v6-c-button` spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`.
`.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child `.pf-v6-c-button.pf-m-button-plain` spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`.

### Additional options in menu (hidden)

### Additional options in menu

## Persistent configuration

### Persistent additional options (hidden)

### Persistent additional options (visible)

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-overflow-menu` | `<div>` | Initiates an overflow menu. Required
`.pf-v6-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. Required
`.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. Required
`.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group.
`.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. Required
`.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`.
`.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`.

##
CSS variables