---
id: Overflow menu
section: components
cssPrefix: pf-v6-c-overflow-menu
propComponents:
  [
    'OverflowMenu',
    'OverflowMenuContent',
    'OverflowMenuControl',
    'OverflowMenuDropdownItem',
    'OverflowMenuGroup',
    'OverflowMenuItem'
  ]
---

import { useRef, useState } from 'react';
import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

## Examples

### Simple (responsive)

```ts file="./OverflowMenuSimple.tsx"

```

### Vertical

Passing `isVertical` to `OverflowMenu` will change its behavior to respond to breakpoints based on window height instead of width.

```ts file="./OverflowMenuSimpleVertical.tsx"

```

### Group types

```ts file="./OverflowMenuGroupTypes.tsx"

```

### Multiple groups

```ts file="./OverflowMenuMultiGroup.tsx"

```

### Persistent

```ts file="./OverflowMenuPersistent.tsx"

```

### Breakpoint on container width

By passing in the `breakpointReference` property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.

You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.

```ts file="./OverflowMenuBreakpointOnContainer.tsx"

```

### Breakpoint on container height

By passing in the `breakpointReference` and `isVertical` properties, the overflow menu's breakpoint will be determined relative to the height of the reference container rather than the window height.

```ts isFullscreen file="./OverflowMenuBreakpointOnContainerHeight.tsx"

```