Tree view
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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example - DOM
Add data-mdb-treeview-init and .treeview class to the container with your list to initialize the component
structure. If you want to nest your lists - wrap a text of a li tag in
a tag and define other ul after it. Add .show class to
the list that you want to expand from the beginning.
- 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
<div data-mdb-treeview-init class="treeview">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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:
name- defines a text for an itemchildren- defines a nested list and it's childrenicon- defines a custom expanding icon for the nested listshow- defines if list expands from the beginning or notdisabled- defines if list item is disabled or not
<div id="sample-element"></div>
const jsTreeview = document.getElementById('sample-element');
const jsInstance = new Treeview(jsTreeview, {
structure: [
{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 data-mdb-open-on-click to specify whether to open treeview lists by clicking only on the arrow or
on the entire 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
<div data-mdb-treeview-init class="treeview" data-mdb-open-on-click="false">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Accordion
Use a data-mdb-accordion attribute to enable or disable opening only one list at
the same level.
- 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
<div data-mdb-treeview-init class="treeview" data-mdb-accordion="true">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Selectable
Use a data-mdb-selectable attribute 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
<div data-mdb-treeview-init class="treeview" data-mdb-selectable="true">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Expand
Expand your treeview to the particular list using the
expand(ID) method.
- 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
<div class="row justify-content-center mb-3">
<div class="col-md-3">
<button data-mdb-ripple-init type="button" class="btn btn-primary" id="expand-example-button">
Expand first list
</button>
</div>
</div>
<div class="row">
<div data-mdb-treeview-init class="treeview" id="expand-example">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul id="expand-example-item">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
const expandTreeview = document.getElementById('expand-example');
const expandButton = document.getElementById('expand-example-button');
const expandInstance = Treeview.getInstance(expandTreeview);
expandButton.addEventListener('click', () => {
expandInstance.expand('level-expand-example-item');
});
Collapse
Collapse your treeview using the collapse() method.
- 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
<div class="row justify-content-center mb-3">
<div class="col-md-3">
<button data-mdb-ripple-init type="button" class="btn btn-primary" id="collapse-example-button">
Collapse treeview
</button>
</div>
</div>
<div class="row">
<div data-mdb-treeview-init class="treeview" id="collapse-example">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul class="show">
<li>
<a>Third-one</a>
<ul class="show">
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul class="show">
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
const collapseTreeview = document.getElementById('collapse-example');
const collapseButton = document.getElementById('collapse-example-button');
const collapseInstance = Treeview.getInstance(collapseTreeview);
collapseButton.addEventListener('click', () => {
collapseInstance.collapse();
});
Custom icons - DOM
You can add your custom icons to your treeview. For non-nested elements - paste code of an
icon in the item. For nested elements - declare span tag with
aria-label="toggle" attribute inside a element and paste there the
code for your icon.
Use a data-mdb-rotation-angle attribute to define a rotation angle of nested
lists icons.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
- Third-one
- Third-two
- Third-three
<div data-mdb-treeview-init class="treeview">
<ul>
<li><i class="fas fa-dot-circle"></i> One</li>
<li><i class="fas fa-dot-circle"></i> Two</li>
<li>
<a>
<span
aria-label="toggle"
data-mdb-ripple-init
data-mdb-ripple-unbound="true"
data-mdb-ripple-centered="true"
data-mdb-ripple-color="dark"
>
<i class="fas fa-angle-double-right"></i>
</span>
Three
</a>
<ul class="show" id="custom-icon-list">
<li><i class="fas fa-dot-circle"></i> Second-one</li>
<li><i class="fas fa-dot-circle"></i> Second-two</li>
<li>
<a>
<span
aria-label="toggle"
data-mdb-ripple-init
data-mdb-ripple-unbound="true"
data-mdb-ripple-centered="true"
data-mdb-ripple-color="dark"
>
<i class="fas fa-angle-double-right"></i>
</span>
Second-three
</a>
<ul>
<li><i class="fas fa-dot-circle"></i> Third-one</li>
<li><i class="fas fa-dot-circle"></i> Third-two</li>
<li><i class="fas fa-dot-circle"></i> Third-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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.
<div id="custom-icons-js"></div>
const customIconsTreeview = document.getElementById('custom-icons-js');
const customIconsInstance = new Treeview(customIconsTreeview, {
structure: [
{ name: '<i class="fas fa-dot-circle"></i> One' },
{ name: '<i class="fas fa-dot-circle"></i> Two' },
{
name: ' Three',
show: true,
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Second-one' },
{ name: '<i class="fas fa-dot-circle"></i> Second-two' },
{
name: ' Second-three',
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{
name: ' Third-one',
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
],
},
{ name: '<i class="fas fa-dot-circle"></i> Third-two' },
{
name: ' Third-three',
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
],
},
],
},
],
},
],
});
Color
Set the color of an active item using the
data-mdb-treeview-color attribute.
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
<div class="text-center mb-5">
<button data-mdb-ripple-init type="button" class="btn btn-primary" id="primary">
Primary
</button>
<button data-mdb-ripple-init type="button" class="btn btn-secondary" id="secondary">
Secondary
</button>
<button data-mdb-ripple-init type="button" class="btn btn-warning" id="warning">
Warning
</button>
<button data-mdb-ripple-init type="button" class="btn btn-danger" id="danger">
Danger
</button>
<button data-mdb-ripple-init type="button" class="btn btn-info" id="info">
Info
</button>
<button data-mdb-ripple-init type="button" class="btn btn-success" id="success">
Success
</button>
<button data-mdb-ripple-init type="button" class="btn btn-dark" id="dark">
Dark
</button>
</div>
<div class="row text-center">
<h5>Current color: <span id="current-color">primary</span></h5>
</div>
<div class="row mt-4">
<div data-mdb-treeview-init class="treeview" id="color-example">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
const buttonsID = [
'primary',
'secondary',
'warning',
'danger',
'info',
'success',
'dark',
];
const currentColor = document.getElementById('current-color');
const colorTreeviewEl = document.getElementById('color-example');
buttonsID.forEach((id) => {
const button = document.getElementById(id);
button.addEventListener('click', () => {
buttonsID.forEach((color) => {
colorTreeviewEl.classList.remove(`treeview-${color}`);
});
colorTreeviewEl.classList.add(`treeview-${id}`);
currentColor.innerText = id;
})
});
Line
Use a data-mdb-line attribute 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
<div data-mdb-treeview-init class="treeview" data-mdb-line="true">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Disabled - DOM
Add .treeview-disabled class to the a (if nested) or
li tag to disable your list item. You can expand disabled items, but you can't
select them.
- 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
<div data-mdb-treeview-init class="treeview" data-mdb-selectable="true">
<ul>
<li>One</li>
<li class="treeview-disabled">Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a class="treeview-disabled">Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Disabled - JavaScript
To generate a disabled list item, use disabled property.
<div id="disabled-element"></div>
const disabledTreeview = document.getElementById('disabled-element');
const disabledTreeviewInstance = new Treeview(disabledTreeview, {
structure: [
{ 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' },
],
},
],
},
],
},
],
});
Filter
Use the .filter(string) method to expand list items that meet your requirements.
- 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
<div class="row mb-4 justify-content-center">
<div class="col-md-6">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form1" class="form-control" />
<label class="form-label" for="form1">Find in the treeview</label>
</div>
</div>
</div>
<div class="row">
<div data-mdb-treeview-init class="treeview" id="filter-example">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul>
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
const filterTreeview = document.getElementById('filter-example');
const filteringInput = document.getElementById('form1');
const filterTreeviewInstance = Treeview.getInstance(filterTreeview);
filteringInput.addEventListener('change', () => {
const value = filteringInput.value;
filterTreeviewInstance.filter(value);
});
Tree view - API
Import
import Treeview from 'mdb-treeview';
@import '~mdb-treeview/css/treeview.min.css';
Usage
Via data attribute
Using the Tree view plugin doesn't require any additional JavaScript code - simply add
data-mdb-treeview-init attribute to
.treeview
and use other data attributes to set all options.
<div data-mdb-treeview-init class="treeview">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul>
<li>Second-one</li>
<li>Second-two</li>
<li>Second-three</li>
</ul>
</li>
</ul>
</div>
Via JavaScript
var myTreeview = new Treeview(document.getElementById('myTreeview'), {
structure: [
{name: 'One'},
{name: 'Two'},
{name: 'Three', children: [
{name: 'Second-one'},
{name: 'Second-two'},
{name: 'Second-three'}
]},
]
});
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('.example-class').treeview(options);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-treeview-color="".
| Name | Type | Default | Description |
|---|---|---|---|
structure
|
Array | null | null |
Defines whole structure of the treeview |
treeviewColor
|
String | 'primary' |
Defines a text and background color for an active or hovered item |
openOnClick
|
Boolean | true |
Enables opening list by clicking only on the icon |
selectable
|
Boolean | false |
Setup checkboxes for the every list item |
accordion
|
Boolean | false |
Allows only one list on the same level to be opened |
rotationAngle
|
Number | 90 |
Defines a rotation angle of the icons in nested lists |
line
|
Boolean | false |
Adds a line to every nested list |
Methods
| Name | Description | Example |
|---|---|---|
dispose
|
Destroys a Treeview instance |
myTreeview.dispose()
|
getInstance
|
Static method which allows you to get the tree view instance associated to a DOM element. |
Treeview.getInstance(myTreeviewEl)
|
collapse
|
Collapses every list in treeview |
myTreeview.collapse()
|
expand('level-id')
|
Expands a treeview to the list with a particular ID |
myTreeview.expand('level-sampleItems')
|
filter(string)
|
Expands list items that meet your requirements |
myTreeview.filter('sample')
|
var myTreeviewEl = document.getElementById('myTreeview');
var treeview = new Treeview(myTreeviewEl);
treeview.collapse();
Events
| Name | Description |
|---|---|
itemSelected.mdb.treeview
|
This event fires immediately when one of the treeview checkboxes are changed. Selected
items are available with items property of the event.
|
itemActive.mdb.treeview
|
This event fires immediately when one of the treeview list items are selected by
click. Selected item is available with
item property of the event.
|
var myTreeviewEl = document.getElementById('myTreeview')
myTreeviewEl.addEventListener('itemSelected.mdb.treeview', (e) => {
// do something...
})