[EuiContextMenu] Make content scrollable for large lists
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Problem Statement**
If `EuiContextMenu` renders a lot of items, it can grow too large and it might be desirable to limit its height and make it scrollable. It's possible through applying [useEuiOverflowScroll](https://eui.elastic.co/docs/utilities/scroll/#useeuioverflowscrolly-hook) alongside `max-height`:

**Proposed Solution**
The idea is to add a flag to `EuiContextMenu` that controls whether the content can be scrolled or not (or in other words have max height), and applies appropriate styles to the content element.
**Use Case**
- [Docs builder - Elastic docs version switcher](https://github.com/elastic/docs-builder/pull/1389/files#diff-428db34b70634410095da5390d99e8ffc917ffc197f245d4d611534c9efa626cR243)
**Value / Impact**
- It seems valuable both for end-users and to library consumers.
- It could potentially become a pattern for scrollable context menus.
**Urgency**
It is not a blocker for a large initiative. There is a known workaround.
**Do alternatives or workarounds exist?**
Currently, it requires targeting an underlying base class and applying `background` property with `!important` flag. [Codesandbox](https://codesandbox.io/p/devbox/gifted-morning-dzrk54?file=%2Fpackage.json&workspaceId=ws_3QHkS8M7QbnwRJNYvPkxUw)
```tsx
div:not(.euiContextMenuPanel__title) {
max-height: 10rem;
${useEuiOverflowScroll("y")}
}
`}
panels={panels}
>
```
**Related code or customizations**
- https://github.com/elastic/docs-builder/pull/1389
Contributor guide
Assessment
This issue has not been assessed yet.