Tree View - Getting Started

Get started with the Tree View. Install the package, configure your application and start using the components.

Installation

Using your favorite package manager, install @mui/x-tree-view:

npm install @mui/x-tree-view@next

The Tree View package has a peer dependency on @mui/material. If you are not already using it in your project, you can install it with:

npm install @mui/material @emotion/react @emotion/styled

Please note that react and react-dom are peer dependencies too:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Style engine

Material UI is using Emotion as a styling engine by default. If you want to use styled-components instead, run:

npm install @mui/styled-engine-sc styled-components

Take a look at the Styled engine guide for more information about how to configure styled-components as the style engine.

Render your first component

To make sure that everything is set up correctly, try rendering a SimpleTreeView component:

Applications
Documents

<SimpleTreeView
  aria-label="file system navigator"
  sx={{ height: 200, 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>
</SimpleTreeView>

<SimpleTreeView
  aria-label="file system navigator"
  sx={{ height: 200, 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>
</SimpleTreeView>

Press Enter to start editing

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: {
    MuiRichTreeView: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

API

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