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.


Selectable

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


Expand


Collapse


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.


Color

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

Current color: primary

Line

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


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

Properties

MDBTreeview

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)} />

MDBTreeviewItem

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} />