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.

Controlled

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

      90
    • Updates

      2,294
    • Forums

      3,566
    • Promotions

      733
  • History

Accessibility

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

The component follows the WAI-ARIA authoring practices.