Tree View

A tree view widget presents a hierarchical list.

Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

Basic tree view

Applications
Documents

<TreeView
  aria-label="file system navigator"
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem nodeId="2" label="Calendar" />
  </TreeItem>
  <TreeItem nodeId="5" label="Documents">
    <TreeItem nodeId="10" label="OSS" />
    <TreeItem nodeId="6" label="MUI">
      <TreeItem nodeId="8" label="index.js" />
    </TreeItem>
  </TreeItem>
</TreeView>

Multi-selection

Tree views also support multi-selection.

Applications
Documents

Controlled tree view

The tree view also offers a controlled API.

Applications
Documents

Rich object

While the TreeView/TreeItem component API maximizes flexibility, an extra step is needed to handle a rich object.

Let's consider a data variable with the following shape, recursion can be used to handle it.

const data = {
  id: 'root',
  name: 'Parent',
  children: [
    {
      id: '1',
      name: 'Child - 1',
    },
    // …
  ],
};

Parent

ContentComponent prop

You can use the ContentComponent prop and the useTreeItem hook to further customize the behavior of the TreeItem.

Such as limiting expansion to clicking the icon:

Applications
Documents

Or increasing the width of the state indicator:

Applications
Documents

Customization

Custom icons, border and animation

Main

Gmail clone

All Mail
Trash
Categories
History

Disabled tree items

Focus disabled items

One
Five
Seven

The behavior of disabled tree items depends on the disabledItemsFocusable prop.

If it is false:

Arrow keys will not focus disabled items and, the next non-disabled item will be focused.
Typing the first character of a disabled item's label will not focus the item.
Mouse or keyboard interaction will not expand/collapse disabled items.
Mouse or keyboard interaction will not select disabled items.
Shift + arrow keys will skip disabled items and, the next non-disabled item will be selected.
Programmatic focus will not focus disabled items.

If it is true:

Arrow keys will focus disabled items.
Typing the first character of a disabled item's label will focus the item.
Mouse or keyboard interaction will not expand/collapse disabled items.
Mouse or keyboard interaction will not select disabled items.
Shift + arrow keys will not skip disabled items but, the disabled item will not be selected.
Programmatic focus will focus disabled items.

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)

The component follows the WAI-ARIA authoring practices.

To have an accessible tree view you must use aria-labelledby or aria-label to reference or provide a label on the TreeView, otherwise screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.