Rich Tree View - Customization

Learn how to customize the rich version of the Tree View component.

Basics

Custom icons

Use the collapseIcon slot, the expandIcon slot and the defaultEndIcon prop to customize the Tree View icons. The demo below shows how to add icons using both an existing icon library, such as Material Icons, and creating an icon from scratch using Material UI's SVG Icon component.

Main

Custom toggle animations

Use the groupTransition slot on the TreeItem to pass a component that handles your animation.

The demo below is animated using Material UI's Collapse component together with the react-spring library.

Main

Custom styling

Use treeItemClasses to target internal elements of the Tree Item component and change their styles.

Main

<RichTreeView
  aria-label="customized"
  defaultExpandedNodes={['1']}
  sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
  slots={{ item: StyledTreeItem }}
  items={ITEMS}
/>

<RichTreeView
  aria-label="customized"
  defaultExpandedNodes={['1']}
  sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
  slots={{ item: StyledTreeItem }}
  items={ITEMS}
/>

Press Enter to start editing

Adding custom content

Use the ContentComponent prop and the useTreeItemState hook to replace the Tree Item content with an entirely custom component. The demo below shows how to add an avatar and custom typography elements.

A
Amelia Hart
B
Bailey Monroe

<RichTreeView
  aria-label="icon expansion"
  sx={{ position: 'relative' }}
  defaultExpandedNodes={['3']}
  items={ITEMS}
  slotProps={{ item: { ContentComponent: CustomContent } }}
/>

<RichTreeView
  aria-label="icon expansion"
  sx={{ position: 'relative' }}
  defaultExpandedNodes={['3']}
  items={ITEMS}
  slotProps={{ item: { ContentComponent: CustomContent } }}
/>

Press Enter to start editing

Common examples

Limit expansion to icon container

The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface.

Applications
Documents

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.