MUI X 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

Multi-selection

Tree views also support multi-selection.

Controlled tree view

The tree view also offers a controlled API.

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',
    },
    // …
  ],
};

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 expand icon:

Or increasing the width of the item state indicator to be full-width:

Customization

Custom icons, border and animation

Gmail clone

Disabled tree items

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/WAI/ARIA/apg/patterns/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.

TypeScript

In order to benefit from the CSS overrides and default prop customization with the theme, TypeScript users need to import the following types. Internally, it uses module augmentation to extend the default theme structure.

// When using TypeScript 4.x and above
import type {} from '@mui/x-tree-view/themeAugmentation';
// When using TypeScript 3.x and below
import '@mui/x-tree-view/themeAugmentation';

const theme = createTheme({
  components: {
    MuiTreeView: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});