Tree View

The TreeView component renders hierarchical navigation or selection trees with expandable nodes.

Usage & Examples

Project Files

project-files.tsx
<TreeView
  label="Project files"
  defaultExpandedIds={["src"]}
  items={[
    {
      id: "src",
      label: "src",
      children: [
        { id: "components", label: "components" },
        { id: "docs", label: "docs" },
      ],
    },
    { id: "package", label: "package.json" },
  ]}
/>

Props API

23 props
Columns
Tree View props API
Default
Description
childrenReactNodeNopropsFallback content rendered when items are not provided.
classNamestringNostylingAdditional class name for the root.
contentClassNamestringNopropsAdditional class name for fallback child content.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
defaultExpandedIdsstring[]Noprops[]Initial expanded node ids for uncontrolled usage.
defaultSelectedIdstringNopropsInitial selected node id for uncontrolled usage.
disabledbooleanNopropsfalseWhether the tree is disabled.
expandedIdsstring[]NopropsControlled expanded node ids.
glassbooleanNopropsconfigured default glass setting (fallback: false)Whether to render glass styling.
itemsTreeViewNode[]Noprops[]Tree nodes to render.
labelstringNoprops"Tree"Accessible label for the tree.
loadingbooleanNopropsfalseWhether the tree should display a loading state.