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

Miller columns

Component status
Contribution
Current version@spectrum-css/miller@5.1.4
ReleasedMarch 7, 2024
View repository
GitHub
View package
npm

Variants

Miller Columns (Branches Selectable)
Contribution

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

  • File 1
  • File 2
  • asset item thumbnail File 3
  • File 1
  • File 2
  • asset item thumbnail 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-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" aria-labelledby="assetitemlabel-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-1">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-2">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" aria-labelledby="assetitemlabel-3">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-3">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </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-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" aria-labelledby="assetitemlabel-4">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-4">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-5" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-5">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" aria-labelledby="assetitemlabel-6" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-6">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
    </ul>
  </div>
</div>

Miller Columns (Files Selectable)
Contribution

Miller columns that only allow files to be selected.

  • File 1
  • File 2
  • asset item thumbnail File 3
  • File 1
  • File 2
  • asset item thumbnail 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-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-7">File 2</span>
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-7">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
        <img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span></span>

        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </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-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-8">File 2</span>
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" aria-labelledby="assetitemlabel-8">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selected" tabindex="0">
        <img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-9">File 3</span>
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" aria-labelledby="assetitemlabel-9" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100"/>
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100"/>
        </svg>
      </li>
    </ul>
  </div>
</div>