Skip to main contentCarbon Design System

Tree view

Preview the tree view component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Live demo

<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'
/>
<TreeNode
key='5'
id='5'
value='Cloud computing'
label='Cloud computing'
isExpanded={true}
>
<TreeNode
key='5-1'
id='5-1'
value='Containers'
label='Containers'
/>
<TreeNode
key='5-2'
id='5-2'
value='Databases'
label='Databases'
/>
<TreeNode
key='5-3'
id='5-3'
value='DevOps'
label='DevOps'>
<TreeNode
key='5-4'
id='5-4'
value='Solutions'
label='Solutions'
/>
<TreeNode
key='5-5'
id='5-5'
value='Case studies'
label='Case studies'>
<TreeNode
key='5-6'
id='5-6'
value='Resources'
label='Resources'
/>
</TreeNode>
</TreeNode>
</TreeNode>
<TreeNode
key='6'
id='6'
value='Data & Analytics'
label='Data & Analytics'>
<TreeNode
key='6-1'
id='6-1'
value='Big data'
label='Big data'
/>
<TreeNode
id='6-2'
value='Business intelligence'
label='Business intelligence'
/>
</TreeNode>
</TreeView>
</div>
TreeView
Modifiers
size