package.docs.components.OverflowMenu.examples.overflow-menu.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Overflow menu
section: components
cssPrefix: pf-v6-c-overflow-menu
---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
```html
` | Initiates an overflow menu. **Required** |
| `.pf-v6-c-overflow-menu__content` | `` | Initiates an overflow menu content section. **Required** |
| `.pf-v6-c-overflow-menu__control` | `` | Initiates the overflow menu control. **Required** |
| `.pf-v6-c-overflow-menu__group` | `` | Initiates an overflow menu group. |
| `.pf-v6-c-overflow-menu__item` | `` | Initiates an overflow menu item. **Required** |
### Group types
```html
` | 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)
```html
` | Initiates an overflow menu. **Required** |
| `.pf-v6-c-overflow-menu__content` | `` | Initiates an overflow menu content section. **Required** |
| `.pf-v6-c-overflow-menu__control` | `` | Initiates the overflow menu control. **Required** |
| `.pf-v6-c-overflow-menu__group` | `` | Initiates an overflow menu group. |
| `.pf-v6-c-overflow-menu__item` | `` | 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)`. |
© 2015 - 2025 Weber Informatics LLC | Privacy Policy
```
### Additional options in menu
```html
```
## Persistent configuration
### Persistent additional options (hidden)
```html
```
### Persistent additional options (visible)
```html
```
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-overflow-menu` | `
```
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` | `
```
### Simple
```html
```
### 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` | `