Skip to content

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.


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',
    // …
  • Parent
    • Child - 1

Customized tree view

Custom icons, border and animation

  • Main
    • Hello
    • World
    • Something something

Gmail clone

  • All Mail

  • Trash

  • Categories

    • Social

    • Updates

    • Forums

    • Promotions

  • History



The component follows the WAI-ARIA authoring practices.