---
id: Overflow menu
section: components
cssPrefix: pf-v5-c-overflow-menu
---import './overflow-menu.css'

## Introduction

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

The overflow menu relies on groups (`.pf-v5-c-overflow-menu__group`) and items (`.pf-v5-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-v5-c-toolbar--spacer--base`, whose value is `--pf-v5-global--spacer--md` or 16px.

### Simple collapsed

```html
<div class="pf-v5-c-overflow-menu" id="overflow-menu-simple">
  <div class="pf-v5-c-overflow-menu__control">
    <div class="pf-v5-c-dropdown pf-m-expanded">
      <button
        class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
        type="button"
        id="overflow-menu-simple-dropdown-toggle"
        aria-label="Generic options"
        aria-expanded="true"
      >
        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
      </button>
      <ul
        class="pf-v5-c-dropdown__menu"
        role="menu"
        aria-labelledby="overflow-menu-simple-dropdown-toggle"
      >
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Item 1</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Item 2</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Item 3</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Item 4</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Item 5</button>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Simple expanded

```html
<div class="pf-v5-c-overflow-menu" id="overflow-menu-simple-expanded">
  <div class="pf-v5-c-overflow-menu__content">
    <div class="pf-v5-c-overflow-menu__item">Item 1</div>
    <div class="pf-v5-c-overflow-menu__item">Item 2</div>
    <div class="pf-v5-c-overflow-menu__group">
      <div class="pf-v5-c-overflow-menu__item">Item 3</div>
      <div class="pf-v5-c-overflow-menu__item">Item 4</div>
      <div class="pf-v5-c-overflow-menu__item">Item 5</div>
    </div>
  </div>
</div>

```

### Default spacing for items and groups:

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

### Overflow menu item types

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

### Group types

```html
<div class="pf-v5-c-overflow-menu" id="overflow-menu-button-group-example">
  <div class="pf-v5-c-overflow-menu__content">
    <div class="pf-v5-c-overflow-menu__group">
      <div class="pf-v5-c-overflow-menu__item">Item 1</div>
      <div class="pf-v5-c-overflow-menu__item">Item 2</div>
      <div class="pf-v5-c-overflow-menu__item">Item 3</div>
    </div>
    <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
      </div>
    </div>
    <div class="pf-v5-c-overflow-menu__group pf-m-icon-button-group">
      <div class="pf-v5-c-overflow-menu__item">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Align left"
        >
          <i class="fas fa-align-left" aria-hidden="true"></i>
        </button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Align center"
        >
          <i class="fas fa-align-center" aria-hidden="true"></i>
        </button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Align right"
        >
          <i class="fas fa-align-right" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
</div>

```

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

### Overflow menu group types

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

### Additional options in dropdown (hidden)

```html
<div
  class="pf-v5-c-overflow-menu"
  id="overflow-menu-simple-additional-options-hidden"
>
  <div class="pf-v5-c-overflow-menu__control">
    <div class="pf-v5-c-dropdown pf-m-expanded">
      <button
        class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
        type="button"
        id="overflow-menu-simple-additional-options-hidden-dropdown-toggle"
        aria-label="Dropdown with additional options"
        aria-expanded="true"
      >
        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
      </button>
      <ul
        class="pf-v5-c-dropdown__menu"
        role="menu"
        aria-labelledby="overflow-menu-simple-additional-options-hidden-dropdown-toggle"
      >
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Primary</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Secondary</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Tertiary</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Align left</button>
        </li>
        <li role="none">
          <button
            role="menuitem"
            class="pf-v5-c-dropdown__menu-item"
          >Align center</button>
        </li>
        <li role="none">
          <button
            role="menuitem"
            class="pf-v5-c-dropdown__menu-item"
          >Align right</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Action 7</button>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Additional options in dropdown (visible)

```html
<div
  class="pf-v5-c-overflow-menu"
  id="overflow-menu-simple-additional-options-visible"
>
  <div class="pf-v5-c-overflow-menu__content">
    <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
      </div>
    </div>
    <div class="pf-v5-c-overflow-menu__group pf-m-icon-button-group">
      <div class="pf-v5-c-overflow-menu__item">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Align left"
        >
          <i class="fas fa-align-left" aria-hidden="true"></i>
        </button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Align center"
        >
          <i class="fas fa-align-center" aria-hidden="true"></i>
        </button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Align right"
        >
          <i class="fas fa-align-right" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="pf-v5-c-overflow-menu__control">
    <div class="pf-v5-c-dropdown pf-m-expanded">
      <button
        class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
        type="button"
        id="overflow-menu-simple-additional-options-visible-dropdown-toggle"
        aria-label="Dropdown with additional options"
        aria-expanded="true"
      >
        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
      </button>
      <ul
        class="pf-v5-c-dropdown__menu"
        role="menu"
        aria-labelledby="overflow-menu-simple-additional-options-visible-dropdown-toggle"
      >
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Action 7</button>
        </li>
      </ul>
    </div>
  </div>
</div>

```

## Persistent configuration

### Persistent additional options (hidden)

```html
<div class="pf-v5-c-overflow-menu" id="overflow-menu-persistent-hidden">
  <div class="pf-v5-c-overflow-menu__content">
    <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
      </div>
    </div>
  </div>
  <div class="pf-v5-c-overflow-menu__control">
    <div class="pf-v5-c-dropdown pf-m-expanded">
      <button
        class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
        type="button"
        id="overflow-menu-persistent-hidden-dropdown-toggle"
        aria-label="Dropdown for persistent example"
        aria-expanded="true"
      >
        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
      </button>
      <ul
        class="pf-v5-c-dropdown__menu"
        role="menu"
        aria-labelledby="overflow-menu-persistent-hidden-dropdown-toggle"
      >
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Secondary</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Tertiary</button>
        </li>
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Action 4</button>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Persistent additional options (visible)

```html
<div
  class="pf-v5-c-overflow-menu"
  id="overflow-menu-persistent-visible-example"
>
  <div class="pf-v5-c-overflow-menu__content">
    <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
      </div>
      <div class="pf-v5-c-overflow-menu__item">
        <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
      </div>
    </div>
  </div>
  <div class="pf-v5-c-overflow-menu__control">
    <div class="pf-v5-c-dropdown pf-m-expanded">
      <button
        class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
        type="button"
        id="overflow-menu-persistent-visible-example-dropdown-toggle"
        aria-label="Dropdown for persistent example"
        aria-expanded="true"
      >
        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
      </button>
      <ul
        class="pf-v5-c-dropdown__menu"
        role="menu"
        aria-labelledby="overflow-menu-persistent-visible-example-dropdown-toggle"
      >
        <li role="none">
          <button role="menuitem" class="pf-v5-c-dropdown__menu-item">Action 4</button>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Usage

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