Trees

Expandable tree structure
Expandable and Expanded

File 1 File 2 File 3 File 4 File 5
File 1 File 2 File 3
(empty)
<div role="tree" class="c-tree">
  <button role="treeitem" aria-expanded="false" class="c-tree__item">Directory 1</button>
  <button role="treeitem" aria-expanded="false" class="c-tree__item">Directory 2</button>
  <button role="treeitem" aria-expanded="true" class="c-tree__item">Directory 3</button>
  <div role="tree" class="c-tree">
    <span role="treeitem" class="c-tree__item">File 1</span>
    <span role="treeitem" class="c-tree__item">File 2</span>
    <span role="treeitem" class="c-tree__item">File 3</span>
    <span role="treeitem" class="c-tree__item">File 4</span>
    <span role="treeitem" class="c-tree__item">File 5</span>
  </div>
  <button role="treeitem" aria-expanded="false" class="c-tree__item">Directory 4</button>
  <div role="tree" class="c-tree">
    <span role="treeitem" class="c-tree__item">File 1</span>
    <span role="treeitem" class="c-tree__item">File 2</span>
    <span role="treeitem" class="c-tree__item">File 3</span>
  </div>
  <button role="treeitem" aria-expanded="false" class="c-tree__item">Directory 5</button>
  <button role="treeitem" aria-expanded="true" class="c-tree__item">Directory 6</button>
  <div role="tree" class="c-tree">
    <span role="treeitem" class="c-tree__item u-text--quiet">(empty)</span>
  </div>
</div>