Skip to content
Layout

OverflowList

Fits items in a row and reports overflow via renderOverflow.

React source Core source

OverflowList

Fits as many items as possible in a single row and collapses the rest behind a caller-supplied overflow affordance via renderOverflow.

Examples

Default

Cap visibility with maxVisible and render a +N indicator for hidden items.

AlphaBeta+1
Demo.tsxtsx
import { OverflowList } from '@var-ui/react';

<OverflowList maxVisible={2} renderOverflow={(hidden) => <span>+{hidden.length}</span>}>
  <OverflowList.Item>Alpha</OverflowList.Item>
  <OverflowList.Item>Beta</OverflowList.Item>
  <OverflowList.Item>Gamma</OverflowList.Item>
</OverflowList>

Many items

Omit maxVisible so the list measures to fit — with a constrained width and many items, the overflow indicator reports how many are hidden.

AlphaBetaGammaDeltaEpsilonZetaEtaThetaIotaKappa
Demo.tsxtsx
import { OverflowList } from '@var-ui/react';

<div style={{ width: 220 }}>
  <OverflowList fillParent renderOverflow={(hidden) => <span>+{hidden.length}</span>}>
    <OverflowList.Item>Alpha</OverflowList.Item>
    <OverflowList.Item>Beta</OverflowList.Item>
    {/* …more items… */}
    <OverflowList.Item>Kappa</OverflowList.Item>
  </OverflowList>
</div>

Props

Accessibility

Compose with OverflowList.Item children or an items + renderItem array. Keep the overflow control keyboard-accessible when it opens a menu (e.g. wrap renderOverflow in a button). Hidden items are not in the tab order until revealed.