Edit these docs Rate these docs

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


        <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


        <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


        <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();
        });
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

Getting started : download & setup


Download

All components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now