kit

Tree

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Tree

Source
<ul data-kit-role="tree" role="tree" id="tree-documents" aria-label="Documents">
  <li role="treeitem" id="tree-documents-handbook" data-value="handbook" aria-level="1" aria-expanded="true" tabindex="-1">
    <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="folder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>Handbook</a>
    <ul role="group">
      <li role="treeitem" id="tree-documents-policies" data-value="policies" aria-level="2" aria-expanded="true" tabindex="-1">
        <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
        <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="folder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>Policies</a>
        <ul role="group">
          <li role="treeitem" id="tree-documents-leave" data-value="leave" aria-level="3" aria-current="page" tabindex="0">
            <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="file-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path></svg>Leave</a>
          </li>
          <li role="treeitem" id="tree-documents-expenses" data-value="expenses" aria-level="3" tabindex="-1">
            <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="file-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path></svg>Expenses</a>
          </li>
        </ul>
      </li>
      <li role="treeitem" id="tree-documents-onboarding" data-value="onboarding" aria-level="2" tabindex="-1">
        <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="file-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path></svg>Onboarding</a>
      </li>
    </ul>
  </li>
  <li role="treeitem" id="tree-documents-contracts" data-value="contracts" aria-level="1" aria-expanded="true" aria-busy="true" tabindex="-1">
    <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="folder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>Contracts</a>
    <ul role="group">
      <li role="none" data-kit-region="loading"></li>
    </ul>
  </li>
  <li role="treeitem" id="tree-documents-archive" data-value="archive" aria-level="1" aria-expanded="true" tabindex="-1">
    <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="folder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>Archive</a>
    <ul role="group">
      <li role="none" data-kit-region="failed">These documents couldn't load. <button type="button">Retry</button></li>
    </ul>
  </li>
  <li role="treeitem" id="tree-documents-templates" data-value="templates" aria-level="1" aria-expanded="false" tabindex="-1">
    <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="folder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>Templates</a>
  </li>
  <li role="treeitem" id="tree-documents-read-me" data-value="read-me" aria-level="1" tabindex="-1">
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="file-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path></svg>Read me</a>
  </li>
</ul>
<form id="region-filters"></form>
<input type="hidden" name="regions" value="" form="region-filters"><ul data-kit-role="tree" role="tree" id="tree-regions" aria-label="Regions" aria-multiselectable="true">
  <li role="treeitem" id="tree-regions-europe" data-value="europe" aria-level="1" aria-expanded="true" aria-selected="false" tabindex="0">
    <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
    <input data-kit-role="selection-control" data-kit-state="mixed" type="checkbox" name="regions" value="europe" form="region-filters" aria-label="Europe" tabindex="-1" checked>
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="globe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"></path></svg>Europe</a>
    <ul role="group">
      <li role="treeitem" id="tree-regions-france" data-value="france" aria-level="2" aria-selected="true" tabindex="-1">
        <input data-kit-role="selection-control" type="checkbox" name="regions" value="france" form="region-filters" aria-label="France" tabindex="-1" checked>
        <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="map-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>France</a>
      </li>
      <li role="treeitem" id="tree-regions-germany" data-value="germany" aria-level="2" aria-selected="false" tabindex="-1">
        <input data-kit-role="selection-control" type="checkbox" name="regions" value="germany" form="region-filters" aria-label="Germany" tabindex="-1">
        <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="map-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Germany</a>
      </li>
      <li role="treeitem" id="tree-regions-spain" data-value="spain" aria-level="2" aria-selected="true" tabindex="-1">
        <input data-kit-role="selection-control" type="checkbox" name="regions" value="spain" form="region-filters" aria-label="Spain" tabindex="-1" checked>
        <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="map-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg>Spain</a>
      </li>
    </ul>
  </li>
  <li role="treeitem" id="tree-regions-asia" data-value="asia" aria-level="1" aria-expanded="false" aria-selected="false" tabindex="-1">
    <button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button>
    <input data-kit-role="selection-control" type="checkbox" name="regions" value="asia" form="region-filters" aria-label="Asia" tabindex="-1">
    <a data-kit-region="item-name" href="#role-tree" tabindex="-1"><svg data-kit-icon="globe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"></path></svg>Asia</a>
  </li>
</ul>