TreeView

TreeView is a hierarchical list of items that may have a parent-child relationship where children can be toggled into view by expanding or collapsing their parent item.

Page navigation navigation

React examples

Default

Parent node
- Child node one
- Child node two
Sibling node one
Sibling node two

<TreeView aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree>
      <TreeView.Item id="child-node-one">Child node one</TreeView.Item>
      <TreeView.Item id="child-node-two" current>
        Child node two
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

<TreeView aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree>
      <TreeView.Item id="child-node-one">Child node one</TreeView.Item>
      <TreeView.Item id="child-node-two" current>
        Child node two
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

Nodes with leading visuals and trailing visuals

Leading and trailing visual guidelines

src
- Avatar.tsx
- Button.tsx
package.json

<TreeView aria-label="Files changed">
  <TreeView.Item id="src" defaultExpanded>
    <TreeView.LeadingVisual>
      <TreeView.DirectoryIcon />
    </TreeView.LeadingVisual>
    src
    <TreeView.SubTree>
      <TreeView.Item id="src/Avatar.tsx">
        <TreeView.LeadingVisual>
          <FileIcon />
        </TreeView.LeadingVisual>
        Avatar.tsx
        <TreeView.TrailingVisual label="Added">
          <DiffAddedIcon fill="var(--fgColor-success)" />
        </TreeView.TrailingVisual>
      </TreeView.Item>
      <TreeView.Item id="src/Button.tsx" current>
        <TreeView.LeadingVisual>
          <FileIcon />
        </TreeView.LeadingVisual>
        Button.tsx
        <TreeView.TrailingVisual label="Modified">
          <DiffModifiedIcon fill="var(--fgColor-attention)" />
        </TreeView.TrailingVisual>
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="package.json">
    <TreeView.LeadingVisual>
      <FileIcon />
    </TreeView.LeadingVisual>
    package.json
    <TreeView.TrailingVisual label="Modified">
      <DiffModifiedIcon fill="var(--fgColor-attention)" />
    </TreeView.TrailingVisual>
  </TreeView.Item>
</TreeView>

<TreeView aria-label="Files changed">
  <TreeView.Item id="src" defaultExpanded>
    <TreeView.LeadingVisual>
      <TreeView.DirectoryIcon />
    </TreeView.LeadingVisual>
    src
    <TreeView.SubTree>
      <TreeView.Item id="src/Avatar.tsx">
        <TreeView.LeadingVisual>
          <FileIcon />
        </TreeView.LeadingVisual>
        Avatar.tsx
        <TreeView.TrailingVisual label="Added">
          <DiffAddedIcon fill="var(--fgColor-success)" />
        </TreeView.TrailingVisual>
      </TreeView.Item>
      <TreeView.Item id="src/Button.tsx" current>
        <TreeView.LeadingVisual>
          <FileIcon />
        </TreeView.LeadingVisual>
        Button.tsx
        <TreeView.TrailingVisual label="Modified">
          <DiffModifiedIcon fill="var(--fgColor-attention)" />
        </TreeView.TrailingVisual>
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="package.json">
    <TreeView.LeadingVisual>
      <FileIcon />
    </TreeView.LeadingVisual>
    package.json
    <TreeView.TrailingVisual label="Modified">
      <DiffModifiedIcon fill="var(--fgColor-attention)" />
    </TreeView.TrailingVisual>
  </TreeView.Item>
</TreeView>

Nodes with leading actions

Item 1
Item 2
Item 3

<TreeView aria-label="Issues">
  <TreeView.Item id="item-0">
    <TreeView.LeadingAction>
      <IconButton icon={GrabberIcon} aria-label="Reorder item 1" variant="invisible" />
    </TreeView.LeadingAction>
    <TreeView.LeadingVisual label="Issue closed">
      <IssueClosedIcon fill="var(--fgColor-done)" />
    </TreeView.LeadingVisual>
    Item 1
  </TreeView.Item>
  <TreeView.Item id="item-2">
    <TreeView.LeadingAction>
      <IconButton icon={GrabberIcon} aria-label="Reorder item 2" variant="invisible" />
    </TreeView.LeadingAction>
    <TreeView.LeadingVisual label="Issue opened">
      <IssueOpenedIcon fill="var(--fgColor-open)" />
    </TreeView.LeadingVisual>
    Item 2
    <TreeView.SubTree>
      <TreeView.Item id="item-2-sub-task-1">
        <TreeView.LeadingVisual label="Issue opened">
          <IssueOpenedIcon fill="var(--fgColor-open)" />
        </TreeView.LeadingVisual>
        sub task 1
      </TreeView.Item>
      <TreeView.Item id="item-2-sub-task-2">
        <TreeView.LeadingVisual label="Issue opened">
          <IssueOpenedIcon fill="var(--fgColor-open)" />
        </TreeView.LeadingVisual>
        sub task 2
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="item-3">
    <TreeView.LeadingAction>
      <IconButton icon={GrabberIcon} aria-label="Reorder item 3" variant="invisible" />
    </TreeView.LeadingAction>
    <TreeView.LeadingVisual label="Issue opened">
      <IssueOpenedIcon fill="var(--fgColor-open)" />
    </TreeView.LeadingVisual>
    Item 3
  </TreeView.Item>
</TreeView>

<TreeView aria-label="Issues">
  <TreeView.Item id="item-0">
    <TreeView.LeadingAction>
      <IconButton icon={GrabberIcon} aria-label="Reorder item 1" variant="invisible" />
    </TreeView.LeadingAction>
    <TreeView.LeadingVisual label="Issue closed">
      <IssueClosedIcon fill="var(--fgColor-done)" />
    </TreeView.LeadingVisual>
    Item 1
  </TreeView.Item>
  <TreeView.Item id="item-2">
    <TreeView.LeadingAction>
      <IconButton icon={GrabberIcon} aria-label="Reorder item 2" variant="invisible" />
    </TreeView.LeadingAction>
    <TreeView.LeadingVisual label="Issue opened">
      <IssueOpenedIcon fill="var(--fgColor-open)" />
    </TreeView.LeadingVisual>
    Item 2
    <TreeView.SubTree>
      <TreeView.Item id="item-2-sub-task-1">
        <TreeView.LeadingVisual label="Issue opened">
          <IssueOpenedIcon fill="var(--fgColor-open)" />
        </TreeView.LeadingVisual>
        sub task 1
      </TreeView.Item>
      <TreeView.Item id="item-2-sub-task-2">
        <TreeView.LeadingVisual label="Issue opened">
          <IssueOpenedIcon fill="var(--fgColor-open)" />
        </TreeView.LeadingVisual>
        sub task 2
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="item-3">
    <TreeView.LeadingAction>
      <IconButton icon={GrabberIcon} aria-label="Reorder item 3" variant="invisible" />
    </TreeView.LeadingAction>
    <TreeView.LeadingVisual label="Issue opened">
      <IssueOpenedIcon fill="var(--fgColor-open)" />
    </TreeView.LeadingVisual>
    Item 3
  </TreeView.Item>
</TreeView>

Without indentation

Parent node
- Child node one
- Child node two
Sibling node one
Sibling node two

<TreeView flat aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree>
      <TreeView.Item id="child-node-one">Child node one</TreeView.Item>
      <TreeView.Item id="child-node-two" current>
        Child node two
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

<TreeView flat aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree>
      <TreeView.Item id="child-node-one">Child node one</TreeView.Item>
      <TreeView.Item id="child-node-two" current>
        Child node two
      </TreeView.Item>
    </TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

Loading subtree - child node count known

When we know the number of loading child nodes, show "skeleton" nodes until the nodes finish loading. This reassures the user that their request is in progress and provides a minimal preview of what's loading.

Parent node
- Loading 2 items
Sibling node one
Sibling node two

<TreeView aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree state="loading" count={2}></TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

<TreeView aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree state="loading" count={2}></TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

Loading subtree - child node count unknown

When we don't know the number of loading child nodes, show a generic loading indicator.

Parent node
- Loading...
Sibling node one
Sibling node two

<TreeView aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree state="loading"></TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

<TreeView aria-label="Files changed">
  <TreeView.Item id="parent-node-one" defaultExpanded>
    Parent node
    <TreeView.SubTree state="loading"></TreeView.SubTree>
  </TreeView.Item>
  <TreeView.Item id="sibling-node-one">Sibling node one</TreeView.Item>
  <TreeView.Item id="sibling-node-two">Sibling node two</TreeView.Item>
</TreeView>

More code examples

The previous examples are a curated subset of the full capabilities of the TreeView component. For more examples, see the TreeView Storybook stories.

Props

Loading data for tree_view...