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


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Simple


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### 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


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

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)


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Additional options in menu


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

## Persistent configuration

### Persistent additional options (hidden)


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Persistent additional options (visible)


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### 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)`. |