> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# OverflowingList

> Fit a row of items into the available space and reveal the complete list in a popup.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`OverflowingList` measures its available width, keeps the fitting items in a compact row, and offers a `+N` button for the remaining items. It updates when the container or item content changes.

Supply the complete ordered list as keyed elements. Your application owns each item's content, actions, and data.

```tsx theme={null}
import { OverflowingList } from 'twenty-ui/components';
import { Tag } from 'twenty-ui/primitives/data-display';

const TEAMS = ['Design', 'Engineering', 'Support', 'Operations'];

export const TeamList = () => (
  <OverflowingList
    style={{ width: 220 }}
    showOverflowCount
    overflowLabel="Show all teams"
  >
    {TEAMS.map((team) => (
      <Tag key={team} color="blue">{team}</Tag>
    ))}
  </OverflowingList>
);
```

<StoryEmbed storyId="ui-components-overflowinglist--documentation" title="Overflowing list example" height={280} />

## Count visibility

The overflow button appears on pointer hover or keyboard focus by default. Set `showOverflowCount` to `true` to keep it visible whenever items overflow. Set it to `false` only when the surrounding interface provides another way to access the complete list. A popup that is already open stays open until it is dismissed, even if `showOverflowCount` changes to `false`.

## Limit inline mounting

Use `maxInlineCount` when rendering a large collection or expensive item content. This caps only the compact row. The popup receives the complete list, including items beyond the cap. It does not fetch missing items or virtualize the popup.

## Popup behavior

Enter, Space, and pointer activation open a non-modal popup with the complete list. Escape closes it and restores focus to the overflow button. Assistive technologies announce the button by its visible count followed by `overflowLabel`, for example "+3 Show all teams". An outside interaction also closes it. The popup uses the surrounding theme and supports ordinary content, links, and buttons without turning them into menu items.

Overflow-trigger and popup interactions do not activate a clickable field host. Each list owns its measurement and popup state independently. Native `div` attributes, styles, class names, and refs apply to the compact row.

## Props

<ParamField body="children" type="ReactElement<unknown, string | JSXElementConstructor<any>>[]" required>
  Complete ordered list of elements, each with a stable key.
</ParamField>

<ParamField body="maxInlineCount" type="number">
  Maximum number of items mounted in the compact row. The popup still contains every item.
</ParamField>

<ParamField body="overflowLabel" type="string" default="Show all items">
  Accessible label for the popup. The overflow button is named by its visible count followed by this label. Defaults to Show all items.
</ParamField>

<ParamField body="showOverflowCount" type="boolean">
  Shows the overflow count on hover and keyboard focus by default. Use true to show it whenever items overflow, or false to omit the trigger. An open popup stays open until it is dismissed.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.