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

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:

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.


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



Custom icons - JSX

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

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.


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

Current color: primary


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

Disabled - JSX

Disabled - JavaScript

To generate a disabled list item, use disabled property.

Tree view - API


        import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';



Name Type Default Description Example
className String '' Add custom class to MDBTreeview <MDBTreeview className="class" />
color String 'primary' Defines a text and background color for an active or hovered item <MDBTreeview color='secondary' />
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 />
line Boolean false Adds a line to every nested list <MDBTreeview line />
treeviewRef Reference A reference for the treeview component <MDBTreeview treeviewRef={someRef} />
getSelectedItem Function Returns an item after selection <MDBTreeview getSelectedItem={(item: any) => console.log(item)} />


Name Type Default Description Example
className String '' Add custom class to MDBTreeviewItem <MDBTreeviewItem className="class" />
name String '' Defines an item text <MDBTreeviewItem name='One' />
show Boolean false Defines if list is opened or not by default <MDBTreeviewItem subtree show />
subtree Boolean false Declares a subtree item <MDBTreeviewItem subtree />
rotationAngle Number 90 Defines a rotation angle of the icons in nested lists <MDBTreeviewItem rotationAngle={180} />
disabled Boolean Disables and item (with all children) <MDBTreeviewItem disabled />
itemRef Reference A reference for the item element <MDBTreeviewItem itemRef={someRef} />