web
mobile

Treeview

Bootstrap Treeview

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

        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

        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


        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;
        

      

NEW We've added MORE STUFF to PRO & BUNDLE.

NEW PRICING

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.


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