Tree view

Vue 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

Initialize tree view structure with MDBTreeview component. 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.

Show code

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
Show code

Open on item click

Use a openOnClick property to define opening lists of treeview by click only on the arrow or on the whole list item.

Show code

Accordion

Use a accordion property to enable or disable opening only one list at the same level.

Show code

Selectable

Use a selectable property to set up checkboxes in every list item.

Show code

Expand

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

Show code

Collapse

Collapse your treeview using the collapse() method.

Show code

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 inside a element and paste there the code for your icon.

Use a rotationAngle property to define a rotation angle of nested lists icons.

Show code

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.

Show code

Color

Set the color of an active item using the treeviewColor property.

Current color: primary
Show code

Line

Use a line property to set up an additional line in every nested list.

Show code

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.

Show code

Disabled - JavaScript

To generate a disabled list item, use disabled property.

Show code

Filter

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

Show code