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

Miller Columns

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/miller@3.0.0-beta.5

Variants


Miller Columns (Branches Selectable)
Contribution

Miller columns that allow both files and folders to be selected.

  • File 1
  • File 2
  • File 3
  • File 1
  • File 2
  • File 3
Show markup
<div class="spectrum-MillerColumns">
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

Miller Columns (Files Selectable)
Contribution

Miller columns that only allow files to be selected.

  • File 1
  • File 2
  • File 3
  • File 1
  • File 2
  • File 3
Show markup
<div class="spectrum-MillerColumns">
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span></span>

        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>

  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selected" tabindex="0">
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>