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.

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
<div style={{width: '300px'}}><TreeView label="Tree View"><TreeNodekey='1'id='1'value='Artificial intelligence'label={<span>Artificial intelligence</span>}/><TreeNodekey='2'id='2'value='Blockchain'label='Blockchain'/><TreeNodekey='3'id='3'value='Business automation'label='Business automation'><TreeNodekey='3-1'id='3-1'value='Business process automation'label='Business process automation'/><TreeNodekey='3-2'id='3-2'value='Business process mapping'label='Business process mapping'/></TreeNode><TreeNodekey='4'id='4'value='Business operations'label='Business operations'