• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Tree View

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/treeview@3.0.3-alpha.1
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" 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">
      <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">
      <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">
          <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">
              <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" 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--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--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--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" 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">
      <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">
          <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">
              <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">
                  <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--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-TreeView-itemThumbnail">
        <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
        <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
      </div>
      <span class="spectrum-TreeView-itemLabel">Composition</span>
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
            <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
          </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-TreeView-itemThumbnail">
            <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
          </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--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-TreeView-itemThumbnail">
        <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
        <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
      </div>
      <span class="spectrum-TreeView-itemLabel">Composition</span>
    </a>
    <ul class="spectrum-TreeView">
      <li class="spectrum-TreeView-item">
        <a class="spectrum-TreeView-itemLink" href="#">
          <div class="spectrum-Thumbnail spectrum-TreeView-itemThumbnail">
            <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Flowers">
          </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-TreeView-itemThumbnail">
            <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
          </div>
          <span class="spectrum-TreeView-itemLabel">Figure</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Disabled
Contribution

Show markup
<ul class="spectrum-TreeView" 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">
      <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">
      <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">
          <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">
              <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" 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">
      <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">
      <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">
          <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">
              <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" 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>

Icons
Contribution

A treeview with icons.

Show markup
<ul class="spectrum-TreeView" 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-Layers" />
      </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">
      <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-Layers" />
          </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-Layers" />
          </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-Layers" />
      </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-Layers" />
      </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">
      <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">
          <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">
              <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-Layers" />
                  </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" 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

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.

No results found

Try another search term.