Tree

The tree widget allows organising hierarchical information in the form of a tree with branches and leaves. Individual branches can be collapsed and expanded depending on the needs.

Tree overview

The tree widget structure

  • tree: the tree widget, specified as:
    • element with data-widget="tree"
  • treeitems: the individual node in the tree, specified as:
    • elements with role="treeitem"
    • using data-items option, specified as a jQuery selector relative to the widget
    • direct children of groups and the widget itself that have no specific role defined
    • direct children of the widget itself that have no specific role defined
  • groups: wrapper for all the child-nodes of a specific node (tree acts as the top group), specified as:
    • elements with role="group"
    • using data-groups option, specified as a jQuery selector relative to the widget

Options for the tree widget

  • data-autocollapse: a boolean indicating whether or not to collapse the nodes automatically (false by default)

Events for the tree widget

  • beforeToggle: triggered on the treeitem toggle and its group element before the toggle happens
  • afterToggle: triggered on the treeitem toggle and its group element after the toggle happens

Both events have the following parameters:

  • toggle: a reference to the treeitem toggle element
  • targets: a reference to the group element
  • status: a boolean indicating whether the targets are visible (true) or hidden (false)
  • event: the actual event that triggered the toggle

In-line tree

The in-line tree is meant to be in-lined into a paragraph of text.

Default in-line tree

  • Vivamus hendrerit arcu
  • sed erat molestie vehicula
    • Sed auctor neque eu tellus
    • rhoncus ut eleifend nibh porttitor
  • Ut in nulla enim
    • Phasellus molestie magna
    • non est bibendum non venenatis nisl tempor
      • Suspendisse dictum
      • feugiat nisl ut dapibus
    • Mauris iaculis porttitor posuere
  • Praesent id metus massa
  • ut blandit odio
    • Proin quis tortor orci
    • Etiam at risus et
    • justo dignissim congue
      • Donec congue lacinia dui
      • a porttitor lectus condimentum laoreet
    • Nunc eu ullamcorper orci

  <ul data-widget="tree">
    <!-- for each treeitem that has no children -->
    <li>
      <span><!-- treeitem label --></span>
      <!-- if treeitem has children -->
      <ul role="group">
        <!-- for each treeitem -->
          <!-- recursive use of the treeitem template -->
        <!-- /for each -->
      </ul>
      <!-- /if -->
    </li>
    <!-- /for each -->
  </ul>

In-line tree with auto-collapsing branches

The auto-collapse option (data-autoCollapse="true") automatically closes branches when navigating the tree.

  • Vivamus hendrerit arcu
  • sed erat molestie vehicula
    • Sed auctor neque eu tellus
    • rhoncus ut eleifend nibh porttitor
  • Ut in nulla enim
    • Phasellus molestie magna
    • non est bibendum non venenatis nisl tempor
      • Suspendisse dictum
      • feugiat nisl ut dapibus
    • Mauris iaculis porttitor posuere
  • Praesent id metus massa
  • ut blandit odio
    • Proin quis tortor orci
    • Etiam at risus et
    • justo dignissim congue
      • Donec congue lacinia dui
      • a porttitor lectus condimentum laoreet
    • Nunc eu ullamcorper orci

  <ul data-widget="tree" data-autoCollapse="true">
    <!-- for each treeitem -->
    <li>
      <span><!-- treeitem label --></span>
      <!-- if treeitem has children -->
      <ul role="group">
        <!-- for each treeitem -->
          <!-- recursive use of the treeitem template -->
        <!-- /for each -->
      </ul>
      <!-- /if -->
    </li>
    <!-- /for each -->
  </ul>

Block tree

The block tree is meant to be used as a navigation menu.

Default block tree


  <nav class="nav nav-block nav-vertical">
    <!-- tree widget -->
    <ul class="nav-list" data-widget="tree">
      <!-- for each treeitem -->
      <li class="nav-item">
        <a href="..." class="nav-link"><!-- treeitem label --></a>
        <!-- if treeitem has children -->
        <ul class="nav-list" role="group">
          <!-- for each treeitem -->
            <!-- recursive use of the treeitem template -->
          <!-- /for each -->
        </ul>
        <!-- /if -->
      </li>
      <!-- /for each -->
    </ul>
    <!-- /tree widget -->
  </nav>

Block tree with auto-collapse of branches


  <nav class="nav nav-block nav-vertical">
    <!-- tree widget -->
    <ul class="nav-list" data-widget="tree" data-autoCollapse="true">
      <!-- for each treeitem -->
      <li class="nav-item">
        <a href="..." class="nav-link"><!-- treeitem label --></a>
        <!-- if treeitem has children -->
        <ul class="nav-list" role="group">
          <!-- for each treeitem -->
            <!-- recursive use of the treeitem template -->
          <!-- /for each -->
        </ul>
        <!-- /if -->
      </li>
      <!-- /for each -->
    </ul>
    <!-- /tree widget -->
  </nav>