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 the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

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
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue