@patternfly/react-core/src/components/OverflowMenu/examples/OverflowMenu.md

This library provides a set of common React components for use with the PatternFly reference implementation.

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

```

### Group types

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

```

### Multiple groups

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

```

### Persistent

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

```

### Breakpoint on container

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"

```