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

Show code

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:

Show code

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.

Show code

Selectable

Use a selectable property to set up checkboxes in every list item.

Show code

Expand

Show code

Collapse

Show code

Custom icons - JSX

Use a rotationAngle property to define a rotation angle of nested lists icons.

Show code

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.

Show code

Color

Set the color of an active item using the color property.

Current color: primary
Show code

Line

Use a line property to set up an additional line in every nested list.

Show code

Disabled - JSX

Show code

Disabled - JavaScript

To generate a disabled list item, use disabled property.

Show code