Tree view

Bootstrap 5 Tree view plugin

MDB treeview plugin 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.

Note: Read the API tab to find all available options and advanced customization


Basic example - DOM

Add .treeview class to the container with your list to initialize the component structure. If you want to nest your lists - wrap a text of a li tag in a tag and define other ul after it. Add .show class to the list that you want to expand from the beginning.

        
            
          <div class="treeview">
            <ul>
              <li>One</li>
              <li>Two</li>
              <li>
                <a>Three</a>
                <ul class="show">
                  <li>Second-one</li>
                  <li>Second-two</li>
                  <li>
                    <a>Second-three</a>
                    <ul>
                      <li>
                        <a>Third-one</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                      <li>Third-two</li>
                      <li>
                        <a>Third-three</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Basic example - JavaScript

You can define whole structure of tree using only JavaScript. There are some props in data that you can use to customize it:

  • name - defines a text for an item
  • children - defines a nested list and it's children
  • icon - defines a custom expanding icon for the nested list
  • show - defines if list expands from the beginning or not
  • disabled - defines if list item is disabled or not
        
            
          <div id="sample-element"></div>
        
        
    
        
            
          const jsTreeview = document.getElementById('sample-element');

          const jsInstance = new mdb.Treeview(jsTreeview, {
            structure: [
              {name: 'One'},
              {name: 'Two'},
              {name: 'Three', children: [
                {name: 'Second-one'},
                {name: 'Second-two'},
                {name: 'Second-three', children: [
                  {name: 'Third-one', children: [
                    {name: 'Fourth-one'},
                    {name: 'Fourth-two'},
                    {name: 'Fourth-three'}
                  ]},
                  {name: 'Third-two'},
                  {name: 'Third-three', children: [
                    {name: 'Fourth-one'},
                    {name: 'Fourth-two'},
                    {name: 'Fourth-three'}
                  ]}
                ]}
              ]}
            ],
          });
        
        
    

Open on item click

Use a data-mdb-open-on-click to define opening lists of treeview by click only on the arrow or on the whole list item.

        
            
          <div class="treeview" data-mdb-open-on-click="false">
            <ul>
              <li>One</li>
              <li>Two</li>
              <li>
                <a>Three</a>
                <ul class="show">
                  <li>Second-one</li>
                  <li>Second-two</li>
                  <li>
                    <a>Second-three</a>
                    <ul>
                      <li>
                        <a>Third-one</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                      <li>Third-two</li>
                      <li>
                        <a>Third-three</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Accordion

Use a data-mdb-accordion attribute to enable or disable opening only one list at the same level.

        
            
          <div class="treeview" data-mdb-accordion="true">
            <ul>
              <li>One</li>
              <li>Two</li>
              <li>
                <a>Three</a>
                <ul class="show">
                  <li>Second-one</li>
                  <li>Second-two</li>
                  <li>
                    <a>Second-three</a>
                    <ul>
                      <li>
                        <a>Third-one</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                      <li>Third-two</li>
                      <li>
                        <a>Third-three</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Selectable

Use a data-mdb-selectable attribute to set up checkboxes in every list item.

        
            
          <div class="treeview" data-mdb-selectable="true">
            <ul>
              <li>One</li>
              <li>Two</li>
              <li>
                <a>Three</a>
                <ul class="show">
                  <li>Second-one</li>
                  <li>Second-two</li>
                  <li>
                    <a>Second-three</a>
                    <ul>
                      <li>
                        <a>Third-one</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                      <li>Third-two</li>
                      <li>
                        <a>Third-three</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Expand

Expand your treeview to the particular list using the expand(ID) method.

        
            
          <div class="row justify-content-center mb-3">
            <div class="col-md-3">
              <button type="button" class="btn btn-primary" id="expand-example-button">
                Expand first list
              </button>
            </div>
          </div>

          <div class="row">
            <div class="treeview" id="expand-example">
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>
                  <a>Three</a>
                  <ul id="expand-example-item">
                    <li>Second-one</li>
                    <li>Second-two</li>
                    <li>
                      <a>Second-three</a>
                      <ul>
                        <li>
                          <a>Third-one</a>
                          <ul>
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                        <li>Third-two</li>
                        <li>
                          <a>Third-three</a>
                          <ul>
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        
        
    
        
            
          const expandTreeview = document.getElementById('expand-example');
          const expandButton = document.getElementById('expand-example-button');

          const expandInstance = mdb.Treeview.getInstance(expandTreeview);

          expandButton.addEventListener('click', () => {
            expandInstance.expand('level-expand-example-item');
          });
        
        
    

Collapse

Collapse your treeview using the collapse() method.

        
            
          <div class="row justify-content-center mb-3">
            <div class="col-md-3">
              <button type="button" class="btn btn-primary" id="collapse-example-button">
                Collapse treeview
              </button>
            </div>
          </div>

          <div class="row">
            <div class="treeview" id="collapse-example">
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>
                  <a>Three</a>
                  <ul class="show">
                    <li>Second-one</li>
                    <li>Second-two</li>
                    <li>
                      <a>Second-three</a>
                      <ul class="show">
                        <li>
                          <a>Third-one</a>
                          <ul class="show">
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                        <li>Third-two</li>
                        <li>
                          <a>Third-three</a>
                          <ul class="show">
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        
        
    
        
            
          const collapseTreeview = document.getElementById('collapse-example');
          const collapseButton = document.getElementById('collapse-example-button');

          const collapseInstance = mdb.Treeview.getInstance(collapseTreeview);

          collapseButton.addEventListener('click', () => {
            collapseInstance.collapse();
          });
        
        
    

Custom icons - DOM

You can add your custom icons to your treeview. For non-nested elements - paste code of an icon in the item. For nested elements - declare span tag with aria-label="toggle" attribute inside a element and paste there the code for your icon.

Use a data-mdb-rotation-angle attribute to define a rotation angle of nested lists icons.

        
            
          <div class="treeview">
            <ul>
              <li><i class="fas fa-dot-circle"></i> One</li>
              <li><i class="fas fa-dot-circle"></i> Two</li>
              <li>
                <a>
                  <span
                    aria-label="toggle"
                    class="ripple"
                    data-mdb-ripple-unbound="true"
                    data-mdb-ripple-centered="true"
                    data-mdb-ripple-color="dark"
                    ><i class="fas fa-angle-double-right"></i
                  ></span>
                  Three
                </a>
                <ul class="show" id="custom-icon-list">
                  <li><i class="fas fa-dot-circle"></i> Second-one</li>
                  <li><i class="fas fa-dot-circle"></i> Second-two</li>
                  <li>
                    <a
                      ><span
                        aria-label="toggle"
                        class="ripple"
                        data-mdb-ripple-unbound="true"
                        data-mdb-ripple-centered="true"
                        data-mdb-ripple-color="dark"
                        ><i class="fas fa-angle-double-right"></i
                      ></span>
                      Second-three</a
                    >
                    <ul>
                      <li><i class="fas fa-dot-circle"></i> Third-one</li>
                      <li><i class="fas fa-dot-circle"></i> Third-two</li>
                      <li><i class="fas fa-dot-circle"></i> Third-three</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Custom icons - JavaScript

Add icons to the list elements by pasting an icon code in the name property. If you want to change the rotatable icon in the nested list - use icon property instead.

        
            
          <div id="custom-icons-js"></div>
        
        
    
        
            
          const customIconsTreeview = document.getElementById('custom-icons-js');

          const customIconsInstance = new mdb.Treeview(customIconsTreeview, {
            structure: [
              { name: '<i class="fas fa-dot-circle"></i> One' },
              { name: '<i class="fas fa-dot-circle"></i> Two' },
              {
                name: ' Three',
                show: true,
                icon: '<i class="fas fa-angle-double-right"></i>',
                children: [
                  { name: '<i class="fas fa-dot-circle"></i> Second-one' },
                  { name: '<i class="fas fa-dot-circle"></i> Second-two' },
                  {
                    name: ' Second-three',
                    icon: '<i class="fas fa-angle-double-right"></i>',
                    children: [
                      {
                        name: ' Third-one',
                        icon: '<i class="fas fa-angle-double-right"></i>',
                        children: [
                          { name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
                          { name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
                          { name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
                        ],
                      },
                      { name: '<i class="fas fa-dot-circle"></i> Third-two' },
                      {
                        name: ' Third-three',
                        icon: '<i class="fas fa-angle-double-right"></i>',
                        children: [
                          { name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
                          { name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
                          { name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          });
        
        
    

Color

Set the color of an active item using the data-mdb-treeview-color attribute.

Current color: primary
        
            
          <div class="text-center mb-5">
            <button type="button" class="btn btn-primary" id="primary">
              Primary
            </button>
            <button type="button" class="btn btn-secondary" id="secondary">
              Secondary
            </button>
            <button type="button" class="btn btn-warning" id="warning">
              Warning
            </button>
            <button type="button" class="btn btn-danger" id="danger">
              Danger
            </button>
            <button type="button" class="btn btn-info" id="info">
              Info
            </button>
            <button type="button" class="btn btn-success" id="success">
              Success
            </button>
            <button type="button" class="btn btn-dark" id="dark">
              Dark
            </button>
          </div>

          <div class="row text-center">
            <h5>Current color: <span id="current-color">primary</span></h5>
          </div>

          <div class="row mt-4">
            <div class="treeview" id="color-example">
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>
                  <a>Three</a>
                  <ul class="show">
                    <li>Second-one</li>
                    <li>Second-two</li>
                    <li>
                      <a>Second-three</a>
                      <ul>
                        <li>
                          <a>Third-one</a>
                          <ul>
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                        <li>Third-two</li>
                        <li>
                          <a>Third-three</a>
                          <ul>
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        
        
    
        
            
          const buttonsID = [
          'primary',
          'secondary',
          'warning',
          'danger',
          'info',
          'success',
          'dark',
        ];

        const currentColor = document.getElementById('current-color');

        const colorTreeviewEl = document.getElementById('color-example');

        buttonsID.forEach((id) => {
          const button = document.getElementById(id);

          button.addEventListener('click', () => {
            buttonsID.forEach((color) => {
              colorTreeviewEl.classList.remove(`treeview-${color}`);
            });

            colorTreeviewEl.classList.add(`treeview-${id}`);
            currentColor.innerText = id;
          })
        });
        
        
    

Line

Use a data-mdb-line attribute to set up an additional line in every nested list.

        
            
          <div class="treeview" data-mdb-line="true">
            <ul>
              <li>One</li>
              <li>Two</li>
              <li>
                <a>Three</a>
                <ul class="show">
                  <li>Second-one</li>
                  <li>Second-two</li>
                  <li>
                    <a>Second-three</a>
                    <ul>
                      <li>
                        <a>Third-one</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                      <li>Third-two</li>
                      <li>
                        <a>Third-three</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Disabled - DOM

Add .treeview-disabled class to the a (if nested) or li tag to disable your list item. You can expand disabled items, but you can't select them.

        
            
          <div class="treeview">
            <ul>
              <li>One</li>
              <li class="treeview-disabled">Two</li>
              <li>
                <a>Three</a>
                <ul class="show">
                  <li>Second-one</li>
                  <li>Second-two</li>
                  <li>
                    <a class="treeview-disabled">Second-three</a>
                    <ul>
                      <li>
                        <a>Third-one</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                      <li>Third-two</li>
                      <li>
                        <a>Third-three</a>
                        <ul>
                          <li>Fourth-one</li>
                          <li>Fourth-two</li>
                          <li>Fourth-three</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        
        
    

Disabled - JavaScript

To generate a disabled list item, use disabled property.

        
            
          <div id="disabled-element"></div>
        
        
    
        
            
          const disabledTreeview = document.getElementById('disabled-element');

          const disabledTreeviewInstance = new Treeview(disabledTreeview, {
            structure: [
              { name: 'One', disabled: true },
              { name: 'Two' },
              {
                name: ' Three',
                show: true,
                children: [
                  { name: 'Second-one' },
                  { name: 'Second-two' },
                  {
                    name: ' Second-three',
                    disabled: true,
                    children: [
                      {
                        name: ' Third-one',
                        children: [
                          { name: 'Fourth-one' },
                          { name: 'Fourth-two' },
                          { name: 'Fourth-three' },
                        ],
                      },
                      { name: 'Third-two' },
                      {
                        name: ' Third-three',
                        children: [
                          { name: 'Fourth-one' },
                          { name: 'Fourth-two' },
                          { name: 'Fourth-three' },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          });
        
        
    

Filter

Use the .filter(string) method to expand list items that meet your requirements.

        
            
          <div class="row mb-4 justify-content-center">
            <div class="col-md-6">
              <div class="form-outline">
                <input type="text" id="form1" class="form-control" />
                <label class="form-label" for="form1">Find in the treeview</label>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="treeview" id="filter-example">
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>
                  <a>Three</a>
                  <ul>
                    <li>Second-one</li>
                    <li>Second-two</li>
                    <li>
                      <a>Second-three</a>
                      <ul>
                        <li>
                          <a>Third-one</a>
                          <ul>
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                        <li>Third-two</li>
                        <li>
                          <a>Third-three</a>
                          <ul>
                            <li>Fourth-one</li>
                            <li>Fourth-two</li>
                            <li>Fourth-three</li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        
        
    
        
            
          const filterTreeview = document.getElementById('filter-example');
          const filteringInput = document.getElementById('form1');

          const filterTreeviewInstance = Treeview.getInstance(filterTreeview);

          filteringInput.addEventListener('change', () => {
            const value = filteringInput.value;

            filterTreeviewInstance.filter(value);
          });
        
        
    

Tree view - API


Usage

Via class

        
            
        <div class="treeview">
          <ul>
            <li>One</li>
            <li>Two</li>
            <li>
              <a>Three</a>
              <ul>
                <li>Second-one</li>
                <li>Second-two</li>
                <li>Second-three</li>
              </ul>
            </li>
          </ul>
        </div>
      
        
    

Via JavaScript

        
            
        var myTreeview = new Treeview(document.getElementById('myTreeview'), {
          structure: [
            {name: 'One'},
            {name: 'Two'},
            {name: 'Three', children: [
              {name: 'Second-one'},
              {name: 'Second-two'},
              {name: 'Second-three'}
            ]},
          ]
        });
      
        
    

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

        
            
        $('.example-class').treeview(options);
      
        
    

Options

Name Type Default Description
treeviewColor String 'primary' Defines a text and background color for an active or hovered item
openOnClick Boolean true Enables opening list by clicking only on the icon
selectable Boolean false Setup checkboxes for the every list item
accordion Boolean false Allows only one list on the same level to be opened
rotationAngle Number 90 Defines a rotation angle of the icons in nested lists
line Boolean false Adds a line to every nested list

Methods

Name Description Example
dispose Destroys a Treeview instance myTreeview.dispose()
getInstance Static method which allows you to get the tree view instance associated to a DOM element. Treeview.getInstance(myTreeviewEl)
collapse Collapses every list in treeview myTreeview.collapse()
expand('level-id') Expands a treeview to the list with a particular ID myTreeview.expand('level-sampleItems')
filter(string) Expands list items that meet your requirements myTreeview.filter('sample')
        
            
        var myTreeviewEl = document.getElementById('myTreeview'); 
        var treeview = new Treeview(myTreeviewEl);
        treeview.collapse();
      
        
    

Events

Name Description
select.mdb.treeview This event fires immediately when one of the treeview checkboxes are changed. Selected items are available with items property of the event.
activeItem.mdb.treeview This event fires immediately when one of the treeview list items are selected by click. Selected item is available with item property of the event.
        
            
        var myTreeviewEl = document.getElementById('myTreeview')
        myTreeviewEl.addEventListener('select', function (e) {
          // do something...
        })
      
        
    

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

        
            
        import Treeview from 'mdb-treeview';