Overflow List


OverflowList takes a generic list of items and renders as many items as can fit inside itself. Overflowed items that do not fit are collapsed into a single element. The visible items will be recomputed when a resize is detected.

OverflowList is used by the

component to render a collapsible path to the current resource.


folder-closeAll filesfolder-closeUsersfolder-closeJanetfolder-closePhotosfolder-closeWednesdaydocumentimage.jpg



To use the OverflowList component, you must pass a list of items, as well as two rendering functions: overflowRenderer and visibleItemRenderer. The component will call these functions with the appropriate items to determine the appearance of the visible and hidden items.

1import React from "react";
2import {
3 OverflowList,
4 Popover,
5 Menu,
6 MenuItem,
7 Button,
8 Icon
9} from "@commure/components-foundation";
11function MyOverflowList() {
12 return (
13 <OverflowList
14 items={[
15 { icon: "folder-close", text: "All files" },
16 { icon: "folder-close", text: "Users" },
17 { icon: "folder-close", text: "Janet" },
18 { icon: "folder-close", text: "Photos" },
19 { icon: "folder-close", text: "Wednesday" },
20 { icon: "document", text: "image.jpg", current: true }
21 ]}
22 overflowRenderer={items => (
23 <Popover
24 content={
25 <Menu>
26 {items.map(({ icon, text }, i) => (
27 <MenuItem key={i} icon={icon} text={text} />
28 ))}
29 </Menu>
30 }
31 >
32 <Button style={{ marginRight: 10 }}>...</Button>
33 </Popover>
34 )}
35 visibleItemRenderer={({ icon, text, current }, index) => (
36 <span style={{ marginRight: 10 }} key={index}>
37 <Icon icon={icon} />
38 {text}
39 </span>
40 )}
41 />
42 );
45export default MyOverflowList;

API Reference


Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
collapseFromfalseBoundaryWhich direction the items should collapse from: start or end of the children. This also determines whether `overflowRenderer` appears before (`START`) or after (`END`) the visible items.
itemstrueT[]All items to display in the list. Items that do not fit in the container will be rendered in the overflow instead.
minVisibleItemsfalsenumberThe minimum number of visible items that should never collapse into the overflow menu, regardless of DOM dimensions.
observeParentsfalsebooleanIf `true`, all parent DOM elements of the container will also be observed. If changes to a parent's size is detected, the overflow will be recalculated. Only enable this prop if the overflow should be recalculated when a parent element resizes in a way that does not also cause the `OverflowList` to resize.
onOverflowfalse(overflowItems: T[]) => voidCallback invoked when the overflowed items change. This is called once after the DOM has settled, rather that on every intermediate change. It is not invoked if resizing produces an unchanged overflow state.
overflowRenderertrue(overflowItems: T[]) => React.ReactNodeCallback invoked to render the overflowed items. Unlike `visibleItemRenderer`, this prop is invoked once with all items that do not fit in the container. Typical use cases for this prop will put overflowed items in a dropdown menu or display a "+X items" label.
stylefalseCSSPropertiesCSS properties to apply to the root element.
tagNamefalsekeyof IntrinsicElementsHTML tag name for the container element.
visibleItemRenderertrue(item: T, index: number) => React.ReactChildCallback invoked to render each visible item. Remember to set a `key` on the rendered element!

Related Reading

Blueprint Reference
Breadcrumbs Documentation