• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Tree View

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/treeview@7.0.2
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

The typical usage of a treeview involves nesting a .spectrum-Treeview element within the .spectrum-TreeView-item parent element.
The visibility of child treeviews is controlled by adding .is-open to the .spectrum-TreeView-item of the parent element.

Variants

Standard
Contribution

Standard treeviews span the entire width of their parent container and are used within panels.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Design Files</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 2</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <span class="spectrum-TreeView-itemLabel">Group 3</span>
        </a>
        <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron100" />
              </svg>
              <span class="spectrum-TreeView-itemLabel">Group 4</span>
            </a>
            <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-Chevron100" />
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Group 5</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Selected
Contribution

A treeview with a selected item.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-selected">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
  </li>
</ul>

Quiet
Contribution

A treeview with quiet selection.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM spectrum-TreeView--quiet" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-selected">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
  </li>
</ul>

Standalone
Contribution

Standalone treeviews are meant to be used outside of a panel.
Items in standalone treeviews have rounded corners.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM spectrum-TreeView--standalone" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-selected">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
  </li>
</ul>

Standalone (quiet)
Contribution

A standalone, quiet treeview.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM spectrum-TreeView--quiet spectrum-TreeView--standalone" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-selected">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
  </li>
</ul>

Folders & Files
Contribution

A nested treeview with folders and files.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Folder"></use>
      </svg>
      <span class="spectrum-TreeView-itemLabel">Design Files</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
            <use xlink:href="#spectrum-icon-18-Folder"></use>
          </svg>
          <span class="spectrum-TreeView-itemLabel">Production Ready</span>
        </a>
      </li>
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
            <use xlink:href="#spectrum-icon-18-Folder"></use>
          </svg>
          <span class="spectrum-TreeView-itemLabel">Work in Progress</span>
        </a>
        <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
          <li class="spectrum-TreeView-item is-open">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron100" />
              </svg>
              <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
                <use xlink:href="#spectrum-icon-18-Folder"></use>
              </svg>
              <span class="spectrum-TreeView-itemLabel">Branding</span>
            </a>
            <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-Chevron100" />
                  </svg>
                  <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
                    <use xlink:href="#spectrum-icon-18-Folder"></use>
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Assets</span>
                </a>
              </li>
              <li class="spectrum-TreeView-item is-open">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-Chevron100" />
                  </svg>
                  <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
                    <use xlink:href="#spectrum-icon-18-Folder"></use>
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Explorations</span>
                </a>
                <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
                  <li class="spectrum-TreeView-item">
                    <a class="spectrum-TreeView-itemLink" href="#">
                      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Document">
                        <use xlink:href="#spectrum-icon-18-Document"></use>
                      </svg>
                      <span class="spectrum-TreeView-itemLabel">CocaCola_01.ai</span>
                    </a>
                  </li>
                  <li class="spectrum-TreeView-item">
                    <a class="spectrum-TreeView-itemLink" href="#">
                      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Document">
                        <use xlink:href="#spectrum-icon-18-Document"></use>
                      </svg>
                      <span class="spectrum-TreeView-itemLabel">CocaCola_02.ai</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
            <use xlink:href="#spectrum-icon-18-Folder"></use>
          </svg>
          <span class="spectrum-TreeView-itemLabel">Archive</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Folder"></use>
      </svg>
      <span class="spectrum-TreeView-itemLabel">References</span>
    </a>
  </li>
</ul>

Thumbnail
Contribution

A treeview with Thumbnails.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM spectrum-TreeView--thumbnail" style="width: 250px">
  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <div class="spectrum-Thumbnail spectrum-Thumbnail--size500 spectrum-TreeView-itemThumbnail">
        <div class="spectrum-Thumbnail-image-wrapper">
          <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
          <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
        </div>
      </div>
      <span class="spectrum-TreeView-itemLabel">Composition</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--size500 spectrum-TreeView-itemThumbnail">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
            </div>
          </div>
          <span class="spectrum-TreeView-itemLabel">Flowers</span>
        </a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--size500 spectrum-TreeView-itemThumbnail">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
            </div>
          </div>
          <span class="spectrum-TreeView-itemLabel">Figure</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Thumbnail (quiet)
Contribution

A quiet treeview with Thumbnails.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM spectrum-TreeView--thumbnail spectrum-TreeView--quiet" style="width: 250px">
  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#" style="width: 250px">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <div class="spectrum-Thumbnail spectrum-Thumbnail--size500 spectrum-TreeView-itemThumbnail">
        <div class="spectrum-Thumbnail-image-wrapper">
          <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
          <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
        </div>
      </div>
      <span class="spectrum-TreeView-itemLabel">Composition</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--size500 spectrum-TreeView-itemThumbnail">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
            </div>
          </div>
          <span class="spectrum-TreeView-itemLabel">Flowers</span>
        </a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--size500 spectrum-TreeView-itemThumbnail">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
            </div>
          </div>
          <span class="spectrum-TreeView-itemLabel">Figure</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Disabled
Contribution

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-disabled">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 1</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 2</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <span class="spectrum-TreeView-itemLabel">Group 3</span>
        </a>
        <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron100" />
              </svg>
              <span class="spectrum-TreeView-itemLabel">Group 4</span>
            </a>
            <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-Chevron100" />
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Group 5</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Sections
Contribution

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <div class="spectrum-TreeView-heading"><span class="spectrum-TreeView-itemLabel">Section 1</span></div>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 1</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
  </li>
  <div class="spectrum-TreeView-heading"><span class="spectrum-TreeView-itemLabel">Section 2</span></div>
  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 2</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <span class="spectrum-TreeView-itemLabel">Group 3</span>
        </a>
        <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron100" />
              </svg>
              <span class="spectrum-TreeView-itemLabel">Group 4</span>
            </a>
            <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-Chevron100" />
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Group 5</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Drop target
Contribution

A treeview with an item that’s a drop target.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
  </li>

  <li class="spectrum-TreeView-item is-drop-target">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
  </li>
</ul>

Sizing
Contribution

Treeview supports t-shirt sizing (s, m, l, xl)

Show markup
<div>
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
  <ul class="spectrum-TreeView spectrum-TreeView--sizeS" style="width: 250px">
    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
    </li>

    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
    </li>
  </ul>
</div>
<div>
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
  <ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
    </li>

    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
    </li>
  </ul>
</div>
<div>
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
  <ul class="spectrum-TreeView spectrum-TreeView--sizeL" style="width: 250px">
    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
    </li>

    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
    </li>
  </ul>
</div>
<div>
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
  <ul class="spectrum-TreeView spectrum-TreeView--sizeXL" style="width: 250px">
    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1</span></a>
    </li>

    <li class="spectrum-TreeView-item">
      <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
    </li>
  </ul>
</div>

Icons
Contribution

A treeview with icons.

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
        <use xlink:href="#spectrum-icon-18-Document" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Layer 1</span>
    </a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Folder"></use>
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 1</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
            <use xlink:href="#spectrum-icon-18-Document" />
          </svg>
          <span class="spectrum-TreeView-itemLabel">Layer 2</span>
        </a>
      </li>
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
            <use xlink:href="#spectrum-icon-18-Document" />
          </svg>
          <span class="spectrum-TreeView-itemLabel">Layer 3</span>
        </a>
      </li>
    </ul>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
        <use xlink:href="#spectrum-icon-18-Document" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Layer 4</span>
    </a>
  </li>
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
        <use xlink:href="#spectrum-icon-18-Document" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Layer 5</span>
    </a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Folder"></use>
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 2</span>
    </a>
    <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
      <li class="spectrum-TreeView-item is-open">
        <a class="spectrum-TreeView-itemLink" href="#">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
          <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
            <use xlink:href="#spectrum-icon-18-Folder"></use>
          </svg>
          <span class="spectrum-TreeView-itemLabel">Group 3</span>
        </a>
        <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
          <li class="spectrum-TreeView-item">
            <a class="spectrum-TreeView-itemLink" href="#">
              <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-css-icon-Chevron100" />
              </svg>
              <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
                <use xlink:href="#spectrum-icon-18-Folder"></use>
              </svg>
              <span class="spectrum-TreeView-itemLabel">Group 4</span>
            </a>
            <ul class="spectrum-TreeView spectrum-TreeView--sizeM">
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
                    <use xlink:href="#spectrum-icon-18-Document" />
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Layer 6</span>
                </a>
              </li>
              <li class="spectrum-TreeView-item">
                <a class="spectrum-TreeView-itemLink" href="#">
                  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
                    <use xlink:href="#spectrum-css-icon-Chevron100" />
                  </svg>
                  <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
                    <use xlink:href="#spectrum-icon-18-Folder"></use>
                  </svg>
                  <span class="spectrum-TreeView-itemLabel">Group 5</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ui>
  </li>
</ul>

Flat
Contribution

A treeview drawn without nesting, suitable for infinite scrolling.
With this version of the treeview, you must manage the visibility of “child items” manually based on the open state of the “parent item.”

Show markup
<ul class="spectrum-TreeView spectrum-TreeView--sizeM" style="width: 250px">
  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 1 with a long name that doesn't fit at all</span></a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 1</span>
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent1">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 2</span></a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent1">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 3</span></a>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 4</span></a>
  </li>

  <li class="spectrum-TreeView-item">
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 5</span></a>
  </li>

  <li class="spectrum-TreeView-item is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 2</span>
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent1 is-open">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 3</span>
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent2">
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 4</span>
    </a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent3" hidden>
    <a class="spectrum-TreeView-itemLink" href="#"><span class="spectrum-TreeView-itemLabel">Layer 6</span></a>
  </li>

  <li class="spectrum-TreeView-item spectrum-TreeView-item--indent3" hidden>
    <a class="spectrum-TreeView-itemLink" href="#">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
      <span class="spectrum-TreeView-itemLabel">Group 5</span>
    </a>
  </li>
</ul>

Migration Guide

T-shirt sizing

TreeView now supports t-shirt sizing and requires that you specify the size of button by adding a .spectrum-TreeView--size* class.

Additional clases

The following classes must be added:

  • .spectrum-TreeView-label is now required to wrap labels to enable truncation behavior
  • .spectrum-Treeview-icon is now required on all non-indicator icons

Renamed classes

  • .spectrum-TreeView-indicator renamed to .spectrum-TreeView-itemIndicator
  • .spectrum-TreeView-icon renamed to .spectrum-TreeView-itemIcon

Moved classes

  • .is-drop-target and .is-selected must be placed on the .spectrum-TreeView-item element

Workflow icon size

  • Please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.