React Bootstrap Treeview

React Treeview - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap treeview 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.

Basic example

Folders

Mail
- Offers
- Contacts
- Calendar
  - Deadlines
  - Meetings
  - Workouts
  - Events
Inbox
- Admin
- Corporate
- Finance
- Other
Favourites
- Restaurants
- Places
- Games
- Coctails
- Food
Notes
Settings
Devices
Deleted Items

Show code

        
            
        import React, { Component } from 'react';
        import {
          MDBContainer,
          MDBCol,
          MDBTreeview,
          MDBTreeviewList,
          MDBTreeviewItem
        } from 'mdbreact';
        
        class TreeviewExample extends Component {
          render() {
            return (
              <MDBContainer header='Animated'>
                <MDBCol md='4'>
                  <MDBTreeview header='Folders' className='w-20'>
                    <MDBTreeviewList icon='envelope-open' title='Mail' far open>
                      <MDBTreeviewItem icon='address-book' title='Contact' far />
                      <MDBTreeviewItem icon='bell' title='Offer' far />
                      <MDBTreeviewList icon='calendar' title='Calendar' far open>
                        <MDBTreeviewItem icon='clock' title='Deadlines' far />
                        <MDBTreeviewItem icon='users' title='Meetings' opened />
                        <MDBTreeviewItem icon='basketball-ball' title='Workouts' />
                        <MDBTreeviewItem icon='mug-hot' title='Events' />
                      </MDBTreeviewList>
                    </MDBTreeviewList>
                    <MDBTreeviewList title='Inbox' far>
                      <MDBTreeviewItem title='Admin' far />
                      <MDBTreeviewItem title='Corporate' far />
                      <MDBTreeviewItem title='Finance' far />
                      <MDBTreeviewItem title='Other' far />
                    </MDBTreeviewList>
                    <MDBTreeviewList icon='gem' title='Favourites' far>
                      <MDBTreeviewItem icon='pepper-hot' title='Restaurants' />
                      <MDBTreeviewItem icon='eye' title='Places' far />
                      <MDBTreeviewItem icon='gamepad' title='Games' />
                      <MDBTreeviewItem icon='cocktail' title='Cocktails' />
                      <MDBTreeviewItem icon='pizza-slice' title='Food' />
                    </MDBTreeviewList>
                    <MDBTreeviewItem icon='comment' title='Notes' far />
                    <MDBTreeviewItem icon='cog' title='Settings' />
                    <MDBTreeviewItem icon='desktop' title='Devices' />
                    <MDBTreeviewItem icon='trash-alt' title='Deleted items' />
                  </MDBTreeview>
                </MDBCol>
              </MDBContainer>
            );
          }
        }
        
        export default TreeviewExample;

Animated treeview

Folders

Mail
- Offers
- Contacts
- Calendar
  - Deadlines
  - Meetings
  - Workouts
  - Events
Inbox
- Admin
- Corporate
- Finance
- Other
Favourites
- Restaurants
- Places
- Games
- Coctails
- Food
Notes
Settings
Devices
Deleted Items

Show code

        
            
        import React, { Component } from 'react';
        import {
          MDBContainer,
          MDBCol,
          MDBTreeview,
          MDBTreeviewList,
          MDBTreeviewItem
        } from 'mdbreact';
        
        class TreeviewExample extends Component {
          render() {
            return (
              <MDBContainer header='Animated'>
                <MDBCol md='4'>
                  <MDBTreeview
                    theme='animated'
                    header='Folders'
                    className='w-20'
                    getValue={value => console.log(value)}
                  >
                    <MDBTreeviewList icon='envelope-open' title='Mail' far open>
                      <MDBTreeviewItem icon='address-book' title='Contact' far />
                      <MDBTreeviewItem icon='bell' title='Offer' far />
                      <MDBTreeviewList icon='calendar' title='Calendar' far open>
                        <MDBTreeviewItem icon='clock' title='Deadlines' far />
                        <MDBTreeviewItem icon='users' title='Meetings' opened />
                        <MDBTreeviewItem icon='basketball-ball' title='Workouts' />
                        <MDBTreeviewItem icon='mug-hot' title='Events' />
                      </MDBTreeviewList>
                    </MDBTreeviewList>
                    <MDBTreeviewList title='Inbox' far>
                      <MDBTreeviewItem title='Admin' far />
                      <MDBTreeviewItem title='Corporate' far />
                      <MDBTreeviewItem title='Finance' far />
                      <MDBTreeviewItem title='Other' far />
                    </MDBTreeviewList>
                    <MDBTreeviewList icon='gem' title='Favourites' far>
                      <MDBTreeviewItem icon='pepper-hot' title='Restaurants' />
                      <MDBTreeviewItem icon='eye' title='Places' far />
                      <MDBTreeviewItem icon='gamepad' title='Games' />
                      <MDBTreeviewItem icon='cocktail' title='Cocktails' />
                      <MDBTreeviewItem icon='pizza-slice' title='Food' />
                    </MDBTreeviewList>
                    <MDBTreeviewItem icon='comment' title='Notes' far />
                    <MDBTreeviewItem icon='cog' title='Settings' />
                    <MDBTreeviewItem icon='desktop' title='Devices' />
                    <MDBTreeviewItem icon='trash-alt' title='Deleted items' />
                  </MDBTreeview>
                </MDBCol>
              </MDBContainer>
            );
          }
        }
        
        export default TreeviewExample;

Colorful treeview

Folders

Mail
- Offers
- Contacts
- Calendar
  - Deadlines
  - Meetings
  - Workouts
  - Events
Inbox
- Admin
- Corporate
- Finance
- Other
Favourites
- Restaurants
- Places
- Games
- Coctails
- Food
Notes
Settings
Devices
Deleted Items

Show code

        
            

        import React, { Component } from 'react';
        import {
          MDBContainer,
          MDBCol,
          MDBTreeview,
          MDBTreeviewList,
          MDBTreeviewItem
        } from 'mdbreact';
        
        class TreeviewExample extends Component {
          render() {
            return (
              <MDBContainer header='Animated'>
                <MDBCol md='4'>
                  <MDBTreeview
                    theme='colorful'
                    header='Folders'
                    className='border-secondary w-20 '
                    getValue={value => console.log(value)}
                  >
                    <MDBTreeviewList icon='envelope-open' title='Mail' far>
                      <MDBTreeviewItem icon='address-book' title='Contact' far />
                      <MDBTreeviewItem icon='bell' title='Offer' far />
                      <MDBTreeviewList icon='calendar' title='Calendar' far>
                        <MDBTreeviewItem icon='clock' title='Deadlines' far />
                        <MDBTreeviewItem icon='users' title='Meetings' />
                        <MDBTreeviewItem icon='basketball-ball' title='Workouts' />
                        <MDBTreeviewItem icon='mug-hot' title='Events' />
                      </MDBTreeviewList>
                    </MDBTreeviewList>
                    <MDBTreeviewList title='Inbox' far>
                      <MDBTreeviewItem title='Admin' far />
                      <MDBTreeviewItem title='Corporate' far />
                      <MDBTreeviewItem title='Finance' far />
                      <MDBTreeviewItem title='Other' far />
                    </MDBTreeviewList>
                    <MDBTreeviewList icon='gem' title='Favourites' far>
                      <MDBTreeviewItem icon='pepper-hot' title='Restaurants' />
                      <MDBTreeviewItem icon='eye' title='Places' far />
                      <MDBTreeviewItem icon='gamepad' title='Games' />
                      <MDBTreeviewItem icon='cocktail' title='Cocktails' />
                      <MDBTreeviewItem icon='pizza-slice' title='Food' />
                    </MDBTreeviewList>
                    <MDBTreeviewItem icon='comment' title='Notes' far />
                    <MDBTreeviewItem icon='cog' title='Settings' />
                    <MDBTreeviewItem icon='desktop' title='Devices' />
                    <MDBTreeviewItem icon='trash-alt' title='Deleted items' />
                  </MDBTreeview>
                </MDBCol>
              </MDBContainer>
            );
          }
        }
        
        export default TreeviewExample;

React Treeview - API

In this section you will find advanced information about the Treeview and TreeviewItem components. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Treeview import statement

In order to use MDBTreeview component make sure you have imported proper module first.

Show code

javascript

        
            
          import { MDBTreeview, MDBTreeviewItem, MDBTreeviewList } from 'mdbreact';

Treeview

API Reference: Properties

Name	Type	Default	Description	Example
`className`	String		Adds custom class to the element	`<MDBTreeview className="font-weight-bold"/>`
`header`	String		Text passed as a value will be displayed in the component's header	`<MDBTreeview header="Folders"/>`
`tag`	String	`'div'`	Sets a tag of the treeview component	`<MDBTreeview tag="li"/>`
`theme`	string		Sets styles required for the element to be animated or colorful	`<MDBTreeview theme="animated"/>`

API Reference: Methods

Name	Parameters	Description	Example
`getValue`		Gets active item data	`<MDBTreeview getValue={ (e) => console.log(e) }/>`

Treeview Item

API Reference: Properties

Name	Type	Default	Description	Example
`className`	String		Adds custom class to the element	`<MDBTreeviewItem className="font-weight-bold"/>`
`disabled`	Boolean	`false`	Sets disabled a state of the component	`<MDBTreeviewItem disabled />`
`disabledClassName`	String		Adds custom class to the element when is disabled	`<MDBTreeviewItem disabled disabledClassName="text-muted disabled" />`
`icon`	String	`"folder-open"`	Sets the icon displayed next to the title	`<MDBTreeviewItem icon="cog"/>`
`fab`	Boolean	`false`	Changes icon's style to fab	`<MDBTreeviewItem icon="comment" fab />`
`fal`	Boolean	`false`	Changes icon's style to fal	`<MDBTreeviewItem icon="comment" fal />`
`far`	Boolean	`false`	Changes icon's style to far	`<MDBTreeviewItem icon="comment" far />`
`opened`	Boolean	`false`	Sets opened a state of the component	`<MDBTreeviewItem opened />`
`tag`	String	`'div'`	Sets a tag of the treeview component	`<MDBTreeviewItem tag="li"/>`
`title`	String		Text value which will be displayed in the tree	`<MDBTreeviewItem title="Settings"/>`

Treeview List

API Reference: Properties

Name	Type	Default	Description	Example
`className`	String		Adds custom class to the element	`<MDBTreeviewList className="font-weight-bold"/>`
`disabled`	Boolean	`false`	Sets disabled a state of the component	`<MDBTreeviewList disabled />`
`disabledClassName`	String		Adds custom class to the element when is disabled	`<MDBTreeviewList disabled disabledClassName="text-muted disabled" />`
`icon`	String	`"folder-open"`	Sets the icon displayed next to the title	`<MDBTreeviewList icon="cog"/>`
`fab`	Boolean	`false`	Changes icon's style to fab	`<MDBTreeviewList icon="comment" fab />`
`fal`	Boolean	`false`	Changes icon's style to fal	`<MDBTreeviewList icon="comment" fal />`
`far`	Boolean	`false`	Changes icon's style to far	`<MDBTreeviewList icon="comment" far />`
`opened`	Boolean	`false`	Sets opened a state of the component	`<MDBTreeviewList opened />`
`tag`	String	`'div'`	Sets a tag of the treeview component	`<MDBTreeviewList tag="li"/>`
`title`	String		Text value which will be displayed in the tree	`<MDBTreeviewList title="Settings"/>`