Simple Tree View - Customization
Learn how to customize the simple version of the Tree View component.
Basics
Custom icons
Use the defaultCollapseIcon
, defaultExpandIcon
, and defaultEndIcon
props 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.
- Hello
- Subtree with children
- World
- Something something
Custom toggle animations
Use the TransitionComponent
prop 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.
- Hello
- Subtree with children
- World
- Something something
Custom styling
Use treeItemClasses
to target internal elements of the Tree Item component and change their styles.
- Hello
- Subtree with children
- World
- Something something
Adding custom content
Use the ContentComponent
prop and the useTreeItem
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.
- AAmelia Hart
- FFreddie Reed
- GGeorgia Johnson
Common examples
Connection border
Target the treeItemClasses.group
class to add connection borders between the Tree View items.
- Hello
- Hello
- Sub-subtree with children
- Hello
- World
- Something something
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
File explorer
The demo below shows many of the previous customization examples brought together to make the Tree View component look completely different than its default design.
All Documents
Learning materials
News
Forums
Travel documents
History
Trash
Gmail clone
Google's Gmail side nav is potentially one of the web's most famous tree view components. The demo below shows how to replicate it.
All Mail
Trash
Social
90Updates
2,294Forums
3,566Promotions
733
History