Skip to main contentCarbon Design System

Tree view

A tree view is a hierarchical structure that provides nested levels of navigation.

Overview

A tree view consists of nested heading levels that create a content hierarchy for users and assist with navigating large amounts of information. Following on with the tree analogy, the tree view component has branch nodes that can be expanded or collapsed to reveal or hide child nodes. The tree may also have leaf nodes. Leaf nodes can appear at any level of the tree hierarchy and do not have child nodes.

Example of tree view with node icons

When to use

  • Often used for navigating file system structures that are made up of folders and documents.
  • To organize large amounts of information that can nest within multiple levels.

When not to use

  • To show and hide UI elements or content on a page.
  • When you only need one level of nested information. In this case, use a different component like the accordion or data table for expandable views that go one level deep.
  • As the primary navigation in a product’s UI. Instead, use the UI Shell left panel for product navigation. A combination of the UI shell left panel and the breadcrumb component can support an information architecture several levels deep.

Live demo

CodeSandbox React 


      <div style={{width: '300px'}}>

        <TreeView label="Tree View">

          <TreeNode

            key='1'

            id='1'

            value='Artificial intelligence'

            label={<span>Artificial intelligence</span>}

          />

          <TreeNode

            key='2'

            id='2'

            value='Blockchain'

            label='Blockchain'

          />

          <TreeNode

            key='3'

            id='3'

            value='Business automation'

            label='Business automation'

          >

            <TreeNode

              key='3-1'

              id='3-1'

              value='Business process automation'

              label='Business process automation'

            />

            <TreeNode

              key='3-2'

              id='3-2'

              value='Business process mapping'

              label='Business process mapping'

            />

          </TreeNode>

          <TreeNode

            key='4'

            id='4'

            value='Business operations'

            label='Business operations'