MUI X Tree View

The Tree View lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

Overview

The MUI X Tree View provides all of the functionality necessary to build a hierarchical list of expandable and collapsible items. The Tree View's theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but it can also stand on its own and be customized to meet the needs of any design system.

The Tree View is open-core: The Community version is MIT-licensed and free forever, while more advanced features require a Pro commercial license. See MUI X Licensing for complete details.

The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:

Data Grid
Date and Time Pickers
Charts
Tree View

import * as React from 'react';
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function TreeViewOverviewDemo() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

import * as React from 'react';
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function TreeViewOverviewDemo() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

Press Enter to start editing

Community version (free forever)

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

The MIT-licensed Community version of the Tree View covers the most common use cases. Proceed to the Quickstart guide to learn more about the differences between the Simple and Rich Tree View components.

Pro version

import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';

The Pro version of the Rich Tree View expands on the Community version by providing drag-and-drop reordering functionality in addition to all other features. Pro features are denoted by the blue cube icon () throughout the documentation.