Skip to content
+

Simple Tree View - Customization

Learn how to customize the Simple 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.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

Custom toggle animations

Use the groupTransition slot on the Tree Item 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.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

Custom styling

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

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

Custom Tree Item

You can use the Tree Item's customization API to build new layouts and manage behaviors.

Learn more about the anatomy of the Tree Items and the customization utilities provided on the Tree Item Customization page.

Headless API

Use the useTreeItem2 hook to create your own component. The demo below shows how to add an avatar and custom typography elements.

  • B
    Bailey Monroe
    • F
      Freddie Reed

Common examples

Connection border

Target the treeItemClasses.groupTransition class to add connection borders between the Tree View items.

  • Main
    • Hello
    • Subtree with children
      • Hello
      • Hello
    • World
    • Something something

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.

The Gmail sidebar is one of the most well known examples of a tree view. The demo below shows how to recreate it with the Tree View component:

  • All Mail

  • Trash

  • Categories

    • Social

      90
    • Updates

      2,294
    • Forums

      3,566
    • Promotions

      733
  • History

API

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