Treeview

Vue Treeview

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

MDB Vue 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.

Vue live preview

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

template
script

        
            
          <template>
            <mdb-container>
              <mdb-treeview style="width: 25%" header="Folders">
                <mdb-treeview-item nested far icon="envelope-open" title="Mail">
                  <mdb-treeview-item far icon="address-book" title="Contact"/>
                  <mdb-treeview-item tag="a" href="#" far icon="bell" title="Offer"/>
                  <mdb-treeview-item nested far icon="calendar" title="Calendar">
                    <mdb-treeview-item far icon="clock" title="Deadlines"/>
                    <mdb-treeview-item icon="users" title="Meetings"/>
                    <mdb-treeview-item icon="basketball-ball" title="Workouts"/>
                    <mdb-treeview-item icon="mug-hot" title="Events"/>
                  </mdb-treeview-item>
                </mdb-treeview-item>
                <mdb-treeview-item far nested title="Inbox">
                  <mdb-treeview-item far title="Admin"/>
                  <mdb-treeview-item far title="Corporate"/>
                  <mdb-treeview-item far title="Finance"/>
                  <mdb-treeview-item far title="Other"/>
                </mdb-treeview-item>
                <mdb-treeview-item nested far icon="gem" title="Favourites">
                  <mdb-treeview-item icon="pepper-hot" title="Restaurants"/>
                  <mdb-treeview-item icon="eye" title="Places"/>
                  <mdb-treeview-item icon="gamepad" title="Games"/>
                  <mdb-treeview-item icon="cocktail" title="Cocktails"/>
                  <mdb-treeview-item icon="pizza-slice" title="Food"/>
                </mdb-treeview-item>
                <mdb-treeview-item far icon="comment" title="Notes"/>
                <mdb-treeview-item icon="cog" title="Settings"/>
                <mdb-treeview-item icon="desktop" title="Devices"/>
                <mdb-treeview-item icon="trash-alt" title="Deleted items"/>
              </mdb-treeview>
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbContainer,
              mdbRow,
              mdbIcon,
              mdbTreeview,
              mdbTreeviewItem
            } from "mdbvue";
            export default {
              name: "TreeviewPage",
              components: {
                mdbContainer,
                mdbRow,
                mdbIcon,
                mdbTreeview,
                mdbTreeviewItem
              }
            };
          </script>

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

template
script

        
            
          <template>
            <mdb-container>
                <mdb-treeview style="width: 25%" header="Folders" animated>
                  <mdb-treeview-item nested animated far icon="envelope-open" title="Mail">
                    <mdb-treeview-item far icon="address-book" title="Contact"/>
                    <mdb-treeview-item far icon="bell" title="Offers"/>
                    <mdb-treeview-item nested animated far icon="calendar" title="Calendar">
                      <mdb-treeview-item far icon="clock" title="Deadlines"/>
                      <mdb-treeview-item icon="users" title="Meetings"/>
                      <mdb-treeview-item icon="basketball-ball" title="Workouts"/>
                      <mdb-treeview-item icon="mug-hot" title="Events"/>
                    </mdb-treeview-item>
                  </mdb-treeview-item>
                  <mdb-treeview-item far nested animated title="Inbox">
                    <mdb-treeview-item far title="Admin"/>
                    <mdb-treeview-item far title="Corporate"/>
                    <mdb-treeview-item far title="Finance"/>
                    <mdb-treeview-item far title="Other"/>
                  </mdb-treeview-item>
                  <mdb-treeview-item nested animated far icon="gem" title="Favourites">
                    <mdb-treeview-item icon="pepper-hot" title="Restaurants"/>
                    <mdb-treeview-item icon="eye" title="Places"/>
                    <mdb-treeview-item icon="gamepad" title="Games"/>
                    <mdb-treeview-item icon="cocktail" title="Cocktails"/>
                    <mdb-treeview-item icon="pizza-slice" title="Food"/>
                  </mdb-treeview-item>
                  <mdb-treeview-item far icon="comment" title="Notes"/>
                  <mdb-treeview-item icon="cog" title="Settings"/>
                  <mdb-treeview-item icon="desktop" title="Devices"/>
                  <mdb-treeview-item icon="trash-alt" title="Deleted items"/>
                </mdb-treeview>
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbContainer,
              mdbRow,
              mdbIcon,
              mdbTreeview,
              mdbTreeviewItem
            } from "mdbvue";
            export default {
              name: "TreeviewPage",
              components: {
                mdbContainer,
                mdbRow,
                mdbIcon,
                mdbTreeview,
                mdbTreeviewItem
              }
            };
          </script>

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

template
script

        
            
          <template>
            <mdb-container>
                <mdb-treeview style="width: 25%" header="Folders" colorful>
                  <mdb-treeview-item nested far icon="envelope-open" title="Mail">
                    <mdb-treeview-item far icon="address-book" title="Contact"/>
                    <mdb-treeview-item far icon="bell" title="Offers"/>
                    <mdb-treeview-item nested far icon="calendar" title="Calendar">
                      <mdb-treeview-item far icon="clock" title="Deadlines"/>
                      <mdb-treeview-item icon="users" title="Meetings"/>
                      <mdb-treeview-item icon="basketball-ball" title="Workouts"/>
                      <mdb-treeview-item icon="mug-hot" title="Events"/>
                    </mdb-treeview-item>
                  </mdb-treeview-item>
                  <mdb-treeview-item far nested title="Inbox">
                    <mdb-treeview-item far title="Admin"/>
                    <mdb-treeview-item far title="Corporate"/>
                    <mdb-treeview-item far title="Finance"/>
                    <mdb-treeview-item far title="Other"/>
                  </mdb-treeview-item>
                  <mdb-treeview-item nested far icon="gem" title="Favourites">
                    <mdb-treeview-item icon="pepper-hot" title="Restaurants"/>
                    <mdb-treeview-item icon="eye" title="Places"/>
                    <mdb-treeview-item icon="gamepad" title="Games"/>
                    <mdb-treeview-item icon="cocktail" title="Cocktails"/>
                    <mdb-treeview-item icon="pizza-slice" title="Food"/>
                  </mdb-treeview-item>
                  <mdb-treeview-item far icon="comment" title="Notes"/>
                  <mdb-treeview-item icon="cog" title="Settings"/>
                  <mdb-treeview-item icon="desktop" title="Devices"/>
                  <mdb-treeview-item icon="trash-alt" title="Deleted items"/>
                </mdb-treeview>
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbContainer,
              mdbRow,
              mdbIcon,
              mdbTreeview,
              mdbTreeviewItem
            } from "mdbvue";
            export default {
              name: "TreeviewPage",
              components: {
                mdbContainer,
                mdbRow,
                mdbIcon,
                mdbTreeview,
                mdbTreeviewItem
              }
            };
          </script>

Treeview - API

In this section you will find advanced information about the Treeview and TreeviewItem components. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Treeview

API Reference: Properties

Name	Type	Default	Description	Example
`tag`	String	`'div'`	Sets a tag of the treeview component	`<mdb-treeview tag="li"/>`
`header`	String		Text passed as a value will be displayed in the component's header	`<mdb-treeview header="Folders"/>`
`animated`	Boolean	`false`	Sets classes required for the element to be animated	`<mdb-treeview animated/>`
`colorful`	Boolean	`false`	Changes treeview layout to colorful	`<mdb-treeview colorful/>`

Treeview Item

API Reference: Properties

Name	Type	Default	Description	Example
`tag`	String	`'div'`	Sets a tag of the treeview component	`<mdb-treeview tag="li"/>`
`nested`	Boolean	`false`	Indicates if element is a parent to other elements	`<mdb-treeview-item nested/>`
`title`	String		Text value which will be displayed in the tree	`<mdb-treeview-item title="Settings"/>`
`icon`	String	`"folder-open"`	Sets the icon displayed next to the title	`<mdb-treeview-item icon="cog"/>`
`animated`	Boolean	`false`	If it's set to `true` on a nested element, the opening animation will be triggered	`<mdb-treeview-item nested animated />`
`far`	Boolean	`false`	Changes icon's style to regular	`<mdb-treeview-item icon="comment" far />`
`fab`	Boolean	`false`	Changes icon's style to brands	`<mdb-treeview-item icon="comment" fab />`
`fal`	Boolean	`false`	Changes icon's style to light	`<mdb-treeview-item icon="comment" fal />`
`fad`	Boolean	`false`	Changes icon's style to duotone	`<mdb-treeview-item icon="comment" fad />`