Components

Trees

A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.

BaseBase › DefaultBase › ExpandedBase › Pill in an itemBase › Deeply nested branchesBasedev ready

Preview

Code

<div class="slds-tree_container" role="application">
  <h4 class="slds-text-title--caps" id="treeheading">Tree Group Header</h4>
  <ul class="slds-tree" role="tree" aria-labelledby="treeheading">
    <li id="tree0-node0" role="treeitem" aria-level="1">
      <div class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div>
    </li>
    <li id="tree0-node1" role="treeitem" aria-level="1" aria-expanded="false">
      <div class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-m-right--x-small" aria-controls="tree0-node1" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button><a id="tree0-node1__label" href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Branch">Tree Branch</a></div>
      <ul class="slds-is-collapsed" role="group" aria-labelledby="tree0-node1__label">
        <li id="tree0-node1-0" role="treeitem" aria-level="2">
          <div class="slds-tree__item">
            <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle">
              <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
              </svg>
              <span class="slds-assistive-text">Toggle</span>
            </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div>
        </li>
      </ul>
    </li>
    <li id="tree0-node2" role="treeitem" aria-level="1">
      <div class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-m-right--x-small" aria-controls="tree0-node2" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button><a id="tree0-node2__label" href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Branch">Tree Branch</a></div>
      <ul class="slds-is-collapsed" role="group" aria-labelledby="tree0-node2__label">
        <li id="tree0-node2-0" role="treeitem" aria-level="2">
          <div class="slds-tree__item">
            <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle">
              <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
              </svg>
              <span class="slds-assistive-text">Toggle</span>
            </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div>
        </li>
      </ul>
    </li>
    <li id="tree0-node3" role="treeitem" aria-level="1">
      <div class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div>
    </li>
  </ul>
</div>

GridGrid › DefaultGrid › ExpandedGrid › Deeply nested branchesGriddev readyNot Compatible with S1 Mobile

Preview

Code

<table class="slds-table slds-table--bordered slds-tree slds-table--tree" role="treegrid" aria-owns="tree0-node0 tree0-node1 tree0-node2 tree0-node3" aria-readonly="true">
  <thead>
    <tr class="slds-text-title--caps">
      <th class="slds-cell-buffer--left" scope="col">
        <div class="slds-grid slds-grid--vertical-align-center">
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-m-right--x-small slds-shrink-none slds-table--tree__toggle" title="Toggle">
            <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">Toggle</span>
          </button>
          <div class="slds-truncate" title="Account Name">Account Name</div>
        </div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Employees">Employees</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Phone Number">Phone Number</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Account Owner">Account Owner</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Billing City">Billing City</div>
      </th>
      <th class="slds-cell-shrink" scope="col">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="settings">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent" id="tree0-node0" role="row" aria-level="1">
      <th data-label="Account Name" scope="row" class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button>
        <div class="slds-truncate" title="Rewis Inc"><a href="javascript:void(0);">Rewis Inc</a></div>
      </th>
      <td data-label="Employees">
        <div class="slds-truncate" title="3,100">3,100</div>
      </td>
      <td data-label="Phone Number">
        <div class="slds-truncate" title="837-555-1212">837-555-1212</div>
      </td>
      <td data-label="Account Owner">
        <div class="slds-truncate" title="Jane Doe"><a href="javascript:void(0);">Jane Doe</a></div>
      </td>
      <td data-label="Billing City">
        <div class="slds-truncate">Phoenix, AZ</div>
      </td>
      <td class="slds-cell-shrink">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="settings">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent" id="tree0-node1" role="row" aria-level="1" aria-expanded="false">
      <th data-label="Account Name" scope="row" class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-button--icon-x-small slds-m-right--x-small" aria-controls="tree0-node1" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button>
        <div class="slds-truncate" title="Acme Corporation"><a href="javascript:void(0);">Acme Corporation</a></div>
      </th>
      <td data-label="Employees">
        <div class="slds-truncate" title="10,000">10,000</div>
      </td>
      <td data-label="Phone Number">
        <div class="slds-truncate" title="837-555-1212">837-555-1212</div>
      </td>
      <td data-label="Account Owner">
        <div class="slds-truncate" title="John Doe"><a href="javascript:void(0);">John Doe</a></div>
      </td>
      <td data-label="Billing City">
        <div class="slds-truncate" title="San Francisco, CA">San Francisco, CA</div>
      </td>
      <td class="slds-cell-shrink">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="settings">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent" id="tree0-node2" role="row" aria-level="1" aria-expanded="false">
      <th data-label="Account Name" scope="row" class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-button--icon-x-small slds-m-right--x-small" aria-controls="tree0-node2" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button>
        <div class="slds-truncate" title="Rohde Enterprises"><a href="javascript:void(0);">Rohde Enterprises</a></div>
      </th>
      <td data-label="Employees">
        <div class="slds-truncate" title="6,000">6,000</div>
      </td>
      <td data-label="Phone Number">
        <div class="slds-truncate" title="837-555-1212">837-555-1212</div>
      </td>
      <td data-label="Account Owner">
        <div class="slds-truncate" title="John Doe"><a href="javascript:void(0);">John Doe</a></div>
      </td>
      <td data-label="Billing City">
        <div class="slds-truncate" title="New York, NY">New York, NY</div>
      </td>
      <td class="slds-cell-shrink">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="settings">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent" id="tree0-node3" role="row" aria-level="1">
      <th data-label="Account Name" scope="row" class="slds-tree__item">
        <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle">
          <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use>
          </svg>
          <span class="slds-assistive-text">Toggle</span>
        </button>
        <div class="slds-truncate" title="Cheese Corp"><a href="javascript:void(0);">Cheese Corp</a></div>
      </th>
      <td data-label="Employees">
        <div class="slds-truncate" title="1,234">1,234</div>
      </td>
      <td data-label="Phone Number">
        <div class="slds-truncate" title="837-555-1212">837-555-1212</div>
      </td>
      <td data-label="Account Owner">
        <div class="slds-truncate" title="Jane Doe"><a href="javascript:void(0);">Jane Doe</a></div>
      </td>
      <td data-label="Billing City">
        <div class="slds-truncate">Paris, France</div>
      </td>
      <td class="slds-cell-shrink">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="settings">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

This tree grid mixes the tree styles with data table styles. The only unique styles are indicated in the Component table below.

Component Overview

A tree is composed of two core elements .slds-tree and .slds-tree__item. The tree wrapper, the outer most parent ul, will receive the class .slds-tree. This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter.

A tree will need helper classes added and removed to help structure the layout. Each child node list needs an aria-level attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within.

Whenever the tree has a nested group, the li element should receive the ARIA role `group`. This will add appropiate styling to decendent .slds-tree__item elements. A helper class of .slds-is-expanded and .slds-is-collapsed will need to be toggled on the appropriate child of list item node if the decendent groups are visible or not visible.

A .slds-tree__item is any element of the tree that is a single node within a node with an ARIA attribute of role="group". To achieve interactions demostrated in the demo, some helper classes are being added and removed based on actions to the list item node. To achieve the desired hover and focus states, applying the .slds-is-hovered and .slds-is-focused class helpers to the li on its respective interactions. If an item is selected and want to demostrate that state, applying the .slds-is-selected helper class will give you this outcome.

In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute aria-controls to the button the icon is contained within. The value of the aria-controls attribute should be the ID of the group that clicking the button will affect.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-tree_container
Applied to:

<div>

Outcome:

Sets min- and max-width on tree

Required:

Required

Comments:

--

.slds-tree
Applied to:

<ul>

Outcome:

Initializes tree

Required:

Required

Comments:

--

.slds-tree__item
Applied to:

<div>

Outcome:

Initializes tree item

Required:

Required

Comments:

Contains the icon and the action that toggles the nested branch

.slds-is-disabled
Applied to:

.slds-button

Outcome:

Creates the indentation space to match rows with children

Required:

Required

Comments:

--

.slds-table--tree
Applied to:

<table>

Outcome:

Initializes the tree grid item

Required:

Required

Comments:

--

.slds-table--tree__toggle
Applied to:

.slds-button

Outcome:

Used on the main tree grid toggle button

Required:

Required

Comments:

Placed on the .button in the table header to open all nodes