Treeview

Vue Treeview

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

        <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 

        <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 

        <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 />