Skip to main content
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.

​
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. 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

​
ReactElement<unknown, string | JSXElementConstructor<any>>[]
required
Complete ordered list of elements, each with a stable key.
​
number
Maximum number of items mounted in the compact row. The popup still contains every item.
​
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.
​
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.