Tree view
React Bootstrap 5 Tree view plugin
MDB treeview plugin is used to show hierarchical information which starts from the root item and proceed to its children and their respective children. Each item besides the root has a parent and can have children.
The parent is the node which is higher in the hierarchy and the child the one that is lower. Siblings are items which have one and the same parent. Items can be expanded and collapsed.
Note: Read the API tab to find all available options and advanced customization
Basic example - JSX
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree show name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
);
}
Basic example - JavaScript
You can define whole structure of tree using only JavaScript. There are some props in data that you can use to customize it:
import React from 'react';
import { MDBTreeview } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview
items={[
{ name: 'One' },
{ name: 'Two' },
{
name: 'Three',
children: [
{ name: 'Second-one' },
{ name: 'Second-two' },
{
name: 'Second-three',
children: [
{
name: 'Third-one',
children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
},
{ name: 'Third-two' },
{
name: 'Third-three',
children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
},
],
},
],
},
]}
/>
);
}
Open on item click
Use a openOnItemClick to define opening lists of treeview by click only on
the arrow or on the whole list item.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview openOnItemClick={false}>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree name='Three' show>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
);
}
Selectable
Use a selectable property to set up checkboxes in every list item.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview selectable>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
);
}
Expand
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React, { useState } from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
import { MDBRow, MDBCol, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const [expandExample, setExpandExample] = useState(false);
return (
<MDBRow className='justify-content-center mb-3'>
<MDBCol md='3'>
<MDBBtn style={{ minWidth: '155px' }} onClick={() => setExpandExample(true)}>
Expand first list
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBTreeview>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree show={expandExample} name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
</MDBRow>
);
}
Collapse
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React, { useState } from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
import { MDBRow, MDBCol, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const [collapseExample, setCollapseExample] = useState(true);
return (
<MDBRow className='justify-content-center mb-3'>
<MDBCol md='3'>
<MDBBtn style={{ minWidth: '155px' }} onClick={() => setCollapseExample(false)}>
Collapse Treeview
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBTreeview>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree show={collapseExample} name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' show subtree>
<MDBTreeviewItem name='Third-one' show subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' show subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
</MDBRow>
);
}
Custom icons - JSX
Use a rotationAngle property to define a rotation angle of nested
lists icons.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
- Third-one
- Third-two
- Third-three
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> One
</>
}
/>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Two
</>
}
/>
<MDBTreeviewItem subtree show icon='angle-double-right' name='Three'>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Second-one
</>
}
/>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Second-two
</>
}
/>
<MDBTreeviewItem name='Second-three' icon='angle-double-right' subtree>
<MDBTreeviewItem name='Third-one' icon='angle-double-right' subtree>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Fourth-one
</>
}
/>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Fourth-two
</>
}
/>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Fourth-three
</>
}
/>
</MDBTreeviewItem>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Third-two
</>
}
/>
<MDBTreeviewItem name='Third-three' icon='angle-double-right' subtree>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Fourth-one
</>
}
/>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Fourth-two
</>
}
/>
<MDBTreeviewItem
name={
<>
<MDBIcon icon='dot-circle' fas /> Fourth-three
</>
}
/>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
);
}
Custom icons - JavaScript
Add icons to the list elements by pasting an icon code in the
name property. If you want to change the rotatable icon in the nested list - use
icon property instead.
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview
items={[
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> One{' '}
</>
),
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Two{' '}
</>
),
},
{
name: 'Three',
subtree: true,
icon: 'angle-double-right',
children: [
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Second-one{' '}
</>
),
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Second-two{' '}
</>
),
},
{
name: 'Second-three',
subtree: true,
icon: 'angle-double-right',
children: [
{
name: 'Third-one',
icon: 'angle-double-right',
subtree: true,
children: [
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Fourth-one
</>
),
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Fourth-two
</>
),
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Fourth-three
</>
),
},
],
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Third-two
</>
),
},
{
name: 'Third-three',
subtree: true,
icon: 'angle-double-right',
children: [
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Fourth-one
</>
),
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Fourth-two
</>
),
},
{
name: (
<>
<MDBIcon icon='dot-circle' fas /> Fourth-three
</>
),
},
],
},
],
},
],
},
]}
/>
);
}
Color
Set the color of an active item using the
color property.
Current color: primary
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React, { useState } from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
import { MDBRow, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const [color, setColor] = useState('primary');
return (
<>
<div className='text-center mb-5'>
<MDBBtn color='primary' onClick={() => setColor('primary')}>
Primary
</MDBBtn>
<MDBBtn color='secondary' onClick={() => setColor('secondary')}>
Secondary
</MDBBtn>
<MDBBtn color='warning' onClick={() => setColor('warning')}>
Warning
</MDBBtn>
<MDBBtn color='danger' onClick={() => setColor('danger')}>
Danger
</MDBBtn>
<MDBBtn color='info' onClick={() => setColor('info')}>
Info
</MDBBtn>
<MDBBtn color='success' onClick={() => setColor('success')}>
Success
</MDBBtn>
<MDBBtn color='dark' onClick={() => setColor('dark')}>
Dark
</MDBBtn>
</div>
<MDBRow className='mt-3'>
<MDBTreeview color={color}>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree show name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
</MDBRow>
</>
);
}
Line
Use a line property to set up an additional line in every nested list.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview line>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem name='Two' />
<MDBTreeviewItem subtree show name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
);
}
Disabled - JSX
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview selectable>
<MDBTreeviewItem name='One' />
<MDBTreeviewItem disabled name='Two' />
<MDBTreeviewItem subtree show name='Three'>
<MDBTreeviewItem name='Second-one' />
<MDBTreeviewItem name='Second-two' />
<MDBTreeviewItem name='Second-three' disabled subtree>
<MDBTreeviewItem name='Third-one' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
<MDBTreeviewItem name='Third-two' />
<MDBTreeviewItem name='Third-three' subtree>
<MDBTreeviewItem name='Fourth-one' />
<MDBTreeviewItem name='Fourth-two' />
<MDBTreeviewItem name='Fourth-three' />
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeviewItem>
</MDBTreeview>
);
}
Disabled - JavaScript
To generate a disabled list item, use disabled property.
import React from 'react';
import { MDBTreeview } from 'mdb-react-treeview';
export default function App() {
return (
<MDBTreeview
items={[
{ name: 'One', disabled: true },
{ name: 'Two' },
{
name: ' Three',
show: true,
children: [
{ name: 'Second-one' },
{ name: 'Second-two' },
{
name: ' Second-three',
disabled: true,
children: [
{
name: ' Third-one',
children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
},
{ name: 'Third-two' },
{
name: ' Third-three',
children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
},
],
},
],
},
]}
/>
);
}
Tree view - API
Import
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
Properties
MDBTreeview
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
color
|
string | 'primary' |
Defines a text and background color for an active or hovered item |
<MDBTreeview color='secondary' />
|
getSelectedItem
|
(item: React.MutableObjectRef<any>) => void | |
Returns an item after selection |
<MDBTreeview getSelectedItem={(item: any) => console.log(item)} />
|
items
|
Record<string,any> | [] |
Defines an array of children to render |
<MDBTreeview items={childrenArray} />
|
line
|
boolean | false |
Adds a line to every nested list |
<MDBTreeview line />
|
openOnItemClick
|
boolean | true |
Enables opening list by clicking only on the icon |
<MDBTreeview openOnItemClick={false} />
|
selectable
|
boolean | false |
Setup checkboxes for the every list item |
<MDBTreeview selectable />
|
treeviewRef
|
React.MutableObjectRef<any> | |
A reference for the treeview component |
<MDBTreeview treeviewRef={someRef} />
|
MDBTreeviewItem
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
disabled
|
boolean | |
Disables and item (with all children) |
<MDBTreeviewItem disabled />
|
icon
|
string | 'angle-right' |
Defines a custom expanding icon for the nested list |
<MDBTreeviewItem icon='angle-down' />
|
itemRef
|
React.MutableObjectRef<any> | |
A reference for the item element |
<MDBTreeviewItem itemRef={someRef} />
|
name
|
React,ComponentProps<any> | '' |
Defines an item text |
<MDBTreeviewItem name='One' />
|
rotationAngle
|
number | 90 |
Defines a rotation angle of the icons in nested lists |
<MDBTreeviewItem rotationAngle={180} />
|
show
|
boolean | false |
Defines if list is opened or not by default |
<MDBTreeviewItem subtree show />
|
subtree
|
boolean | false |
Declares a subtree item |
<MDBTreeviewItem subtree />
|
Events
MDBTreeview
| Name | Type | Description |
|---|---|---|
getSelectedItem
|
(item: React.MutableObjectRef<any>) => void | Returns an item after selection |