Tree viewing is a way of displaying heirarchy. This is a modified version of pure css tree view test pen by Felipe Nunes.

Basic

  <div class="card-panel">
    <div class="tree">
      <span class="root">Top Level Item</span>
      <ul class="branches">
        <li>
          <span>Item 1</span>
        </li>
        <li>
          <span>Item 1</span>
          <ul class="branch">
            <li>
              <span>Item 2</span>
            </li>
            <li>
              <span>Item 2</span>
            </li>
            <li>
              <span class="active">Item 2</span>
            </li>
            <li>
              <span>Item 2</span>
            </li>
            <li>
              <span>Item 2</span>
            </li>
          </ul>
        </li>
        <li>
          <span>Item 1</span>
          <ul class="branch">
            <li>
              <span>Item 2</span>
              <ul class="branch">
                <li>
                  <span class="disabled">Item 3</span>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
            

Outlined

If you want the item to use outlined instead of fill, just add .outlined on the .tree element.

  <div class="card-panel">
    <div class="tree outlined">
      <!-- Tree Contents -->
    </div>
  </div>
            

Block

If you want the item to cover the container's width, just add .block on the .tree element.

  <div class="card-panel">
    <div class="tree block">
      <!-- Tree Contents -->
    </div>
  </div>
            

Link

You can also use the <a> tag instead of <span> tag.

  <div class="card-panel">
    <div class="tree outlined">
      <a href="#!" class="root">Top Level Item</a>
      <ul class="branches">
        <li>
          <a href="#!">Item 1</a>
        </li>
        <li>
          <a href="#!">Item 1</a>
          <ul class="branch">
            <li>
              <a href="#!">Item 2</a>
            </li>
            <li>
              <a href="#!">Item 2</a>
            </li>
            <li>
              <a href="#!" class="active">Item 2</a>
            </li>
            <li>
              <a href="#!">Item 2</a>
            </li>
            <li>
              <a href="#!">Item 2</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Item 1</a>
          <ul class="branch">
            <li>
              <a href="#!">Item 2</a>
              <ul class="branch">
                <li>
                  <a href="#!" class="disabled">Item 3</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>