Treeview

Bootstrap Treeview

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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 Edit in sandbox

HTML
JS

        
            

        <div class="treeview w-20 border">
          <h6 class="pt-3 pl-3">Folders</h6>
          <hr>
          <ul class="mb-1 pl-3 pb-2">
            <li><i class="fas fa-angle-right rotate"></i>
              <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
              <ul class="nested">
                <li><i class="far fa-bell ic-w mr-1"></i>Offers</li>
                <li><i class="far fa-address-book ic-w mr-1"></i>Contacts</li>
                <li><i class="fas fa-angle-right rotate"></i>
                  <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span>
                  <ul class="nested">
                    <li><i class="far fa-clock ic-w mr-1"></i>Deadlines</li>
                    <li><i class="fas fa-users ic-w mr-1"></i>Meetings</li>
                    <li><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts</li>
                    <li><i class="fas fa-mug-hot ic-w mr-1"></i>Events</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><i class="fas fa-angle-right rotate"></i>
              <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
              <ul class="nested">
                <li><i class="far fa-folder-open ic-w mr-1"></i>Admin</li>
                <li><i class="far fa-folder-open ic-w mr-1"></i>Corporate</li>
                <li><i class="far fa-folder-open ic-w mr-1"></i>Finance</li>
                <li><i class="far fa-folder-open ic-w mr-1"></i>Other</li>
              </ul>
            </li>
            <li><i class="fas fa-angle-right rotate"></i>
              <span><i class="far fa-gem ic-w mx-1"></i>Favourites</span>
              <ul class="nested">
                  <li><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants</li>
                  <li><i class="far fa-eye ic-w mr-1"></i>Places</li>
                  <li><i class="fas fa-gamepad ic-w mr-1"></i>Games</li>
                  <li><i class="fas fa-cocktail ic-w mr-1"></i>Coctails</li>
                  <li><i class="fas fa-pizza-slice ic-w mr-1"></i>Food</li>
                </ul>
            </li>
            <li><i class="far fa-comment ic-w mr-1"></i>Notes</li>
            <li><i class="fas fa-cogs ic-w mr-1"></i>Settings</li>
            <li><i class="fas fa-desktop ic-w mr-1"></i>Devices</li>
            <li><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items</li>
          </ul>
        </div>

        
            
        // Treeview Initialization
        $(document).ready(function() {
          $('.treeview').mdbTreeview();
        });

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 Edit in sandbox

HTML
JS

        
            

        <div class="treeview-animated w-20 border mx-4 my-4">
          <h6 class="pt-3 pl-3">Folders</h6>
          <hr>
          <ul class="treeview-animated-list mb-3">
            <li class="treeview-animated-items">
              <a class="closed">
                <i class="fas fa-angle-right"></i>
                <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
              </a>
              <ul class="nested">
                <li>
                  <div class="treeview-animated-element"><i class="far fa-bell ic-w mr-1"></i>Offers
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="far fa-address-book ic-w mr-1"></i>Contacts
                </li>
                <li class="treeview-animated-items">
                  <a class="closed"><i class="fas fa-angle-right"></i>
                    <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span></a>
                  <ul class="nested">
                    <li>
                      <div class="treeview-animated-element"><i class="far fa-clock ic-w mr-1"></i>Deadlines
                    </li>
                    <li>
                      <div class="treeview-animated-element"><i class="fas fa-users ic-w mr-1"></i>Meetings
                    </li>
                    <li>
                      <div class="treeview-animated-element"><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts
                    </li>
                    <li>
                      <div class="treeview-animated-element"><i class="fas fa-mug-hot ic-w mr-1"></i>Events
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="treeview-animated-items">
              <a class="closed">
                <i class="fas fa-angle-right"></i>
                <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
              </a>
              <ul class="nested">
                <li>
                  <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Admin
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Corporate
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Finance
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Other
                </li>
              </ul>
            </li>
            <li class="treeview-animated-items">
              <a class="closed">
                <i class="fas fa-angle-right"></i>
                <span><i class="far fa-gem mx-1"></i>Favourites</span>
              </a>
              <ul class="nested">
                <li>
                  <div class="treeview-animated-element"><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="far fa-eye ic-w mr-1"></i>Places
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="fas fa-gamepad ic-w mr-1"></i>Games
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="fas fa-cocktail ic-w mr-1"></i>Coctails
                </li>
                <li>
                  <div class="treeview-animated-element"><i class="fas fa-pizza-slice ic-w mr-1"></i>Food
                </li>
              </ul>
            </li>
            <li>
              <div class="treeview-animated-element"><i class="far fa-comment ic-w mr-1"></i>Notes
            </li>
            <li>
              <div class="treeview-animated-element"><i class="fas fa-cogs ic-w mr-1"></i>Settings
            </li>
            <li>
              <div class="treeview-animated-element"><i class="fas fa-desktop ic-w mr-1"></i>Devices
            </li>
            <li>
              <div class="treeview-animated-element"><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items
            </li>
          </ul>
        </div>

        
            
        // Treeview Initialization
        $(document).ready(function() {
          $('.treeview-animated').mdbTreeview();
        });

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 Edit in sandbox

HTML
JS

        
            

        <div class="treeview-colorful w-20 border border-secondary mx-4 my-4">
          <h6 class="pt-3 pl-3">Folders</h6>
          <hr>
          <ul class="treeview-colorful-list mb-3">
            <li class="treeview-colorful-items">
              <a class="treeview-colorful-items-header">
                <i class="fas fa-plus-circle"></i>
                <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
              </a>
              <ul class="nested">
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-bell ic-w mr-1"></i>Offers
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-address-book ic-w mr-1"></i>Contacts
                </li>
                <li class="treeview-colorful-items">
                  <a class="treeview-colorful-items-header">
                    <i class="fas fa-plus-circle"></i>
                    <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span></a>
                  <ul class="nested">
                    <li>
                      <div class="treeview-colorful-element"><i class="far fa-clock ic-w mr-1"></i>Deadlines
                    </li>
                    <li>
                      <div class="treeview-colorful-element"><i class="fas fa-users ic-w mr-1"></i>Meetings
                    </li>
                    <li>
                      <div class="treeview-colorful-element"><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts
                    </li>
                    <li>
                      <div class="treeview-colorful-element"><i class="fas fa-mug-hot ic-w mr-1"></i>Events
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="treeview-colorful-items">
              <a class="treeview-colorful-items-header">
                <i class="fas fa-plus-circle"></i>
                <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
              </a>
              <ul class="nested">
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-folder-open ic-w mr-1"></i>Admin
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-folder-open ic-w mr-1"></i>Corporate
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-folder-open ic-w mr-1"></i>Finance
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-folder-open ic-w mr-1"></i>Other
                </li>
              </ul>
            </li>
            <li class="treeview-colorful-items">
              <a class="treeview-colorful-items-header">
                <i class="fas fa-plus-circle"></i>
                <span><i class="far fa-gem mx-1"></i>Favourites</span>
              </a>
              <ul class="nested">
                <li>
                  <div class="treeview-colorful-element"><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="far fa-eye ic-w mr-1"></i>Places
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="fas fa-gamepad ic-w mr-1"></i>Games
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="fas fa-cocktail ic-w mr-1"></i>Coctails
                </li>
                <li>
                  <div class="treeview-colorful-element"><i class="fas fa-pizza-slice ic-w mr-1"></i>Food
                </li>
              </ul>
            </li>
            <li>
              <div class="treeview-colorful-element"><i class="far fa-comment ic-w mr-1"></i>Notes
            </li>
            <li>
              <div class="treeview-colorful-element"><i class="fas fa-cogs ic-w mr-1"></i>Settings
            </li>
            <li>
              <div class="treeview-colorful-element"><i class="fas fa-desktop ic-w mr-1"></i>Devices
            </li>
            <li>
              <div class="treeview-colorful-element"><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items
            </li>
          </ul>
        </div>

        
            
        // Treeview Initialization
        $(document).ready(function() {
          $('.treeview-colorful').mdbTreeview();
        });