All Downloads are FREE. Search and download functionalities are using the official Maven repository.

package.docs.components.OverflowMenu.examples.overflow-menu.md Maven / Gradle / Ivy

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
``` ### Simple ```html
Item 1
Item 2
Item 3
Item 4
Item 5
``` ### 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` | `
` | 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
Item 1
Item 2
Item 3
``` 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` | `
` | 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
``` ### 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` | `
` | 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