elastic / elastic/eui

[EuiContextMenu] Make content scrollable for large lists

Open
#8,803 7 comments 1 reaction 0 assignees View on GitHub
design decision stale-issue
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`:

![Image](https://github.com/user-attachments/assets/e063d0b7-0078-42ec-b4cb-c193d2a6e980)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.