kit

Trail

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.

On Shell, Settings

Trail

On a wide screen, the fold and the school switcher wait for the page.

Source
<nav id="role-trail-two" aria-label="Breadcrumb" data-kit-role="trail">
  <ol>
    <li><a href="#role-trail">Bookings</a></li>
    <li><a href="#role-trail">Oakmere Primary School</a></li>
  </ol>
</nav>
<nav id="role-trail-fits" aria-label="Breadcrumb" data-kit-role="trail" data-kit-fit="pending">
  <ol>
    <li><a href="#role-trail">Clients</a></li>
    <li><a href="#role-trail">Oakmere Primary School</a></li>
    <li><a href="#role-trail">Spring term 2025</a></li>
    <li data-kit-region="fold" hidden>
      <button type="button" data-kit-role="icon-action" popovertarget="role-trail-fits-fold" aria-label="More places"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"/></svg></button>
      <div id="role-trail-fits-fold" data-kit-role="popover" popover="auto">
        <ul>
          <li hidden><a href="#role-trail">Oakmere Primary School</a></li>
          <li hidden><a href="#role-trail">Spring term 2025</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#role-trail">Choir rehearsals</a></li>
  </ol>
</nav>
<nav id="role-trail-middle" aria-label="Breadcrumb" data-kit-role="trail" data-kit-fit="pending">
  <ol>
    <li><a href="#role-trail">Clients</a></li>
    <li>
      <a href="#role-trail">Oakmere Primary School</a>
      <button type="button" data-kit-role="icon-action" popovertarget="role-trail-middle-peers-1" aria-label="Switch school"><svg data-kit-icon="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></button>
      <div id="role-trail-middle-peers-1" data-kit-role="popover" popover="auto">
        <div data-kit-role="form-group"><label for="role-trail-middle-peers-1-search-control">Find a school</label><div data-kit-region="control"><input id="role-trail-middle-peers-1-search-control" type="search" enterkeyhint="search" placeholder="Find a school"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="role-trail-middle-peers-1-search-control-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
        <ul>
          <li><a href="#role-trail">Ashgrove Academy</a></li>
          <li><a href="#role-trail">Birchfield Infant School</a></li>
          <li><a href="#role-trail">Castlebrook Primary School</a></li>
          <li><a href="#role-trail">Dunmore Junior School</a></li>
          <li><a href="#role-trail">Elmwood Church School</a></li>
          <li><a href="#role-trail">Fairlight Primary School</a></li>
          <li><a href="#role-trail">Greenhill Community School</a></li>
          <li><a href="#role-trail">Hollins Park School</a></li>
          <li><a href="#role-trail" aria-current="page">Oakmere Primary School</a></li>
          <li><a href="#role-trail">Riverside Nursery</a></li>
          <li data-kit-region="nothing-matches" hidden>Nothing matches</li>
        </ul>
      </div>
    </li>
    <li><a href="#role-trail">Spring term 2025</a></li>
    <li><a href="#role-trail">Main hall and music room bookings</a></li>
    <li><a href="#role-trail">Wednesday evening lettings</a></li>
    <li data-kit-region="fold" hidden>
      <button type="button" data-kit-role="icon-action" popovertarget="role-trail-middle-fold" aria-label="More places"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"/></svg></button>
      <div id="role-trail-middle-fold" data-kit-role="popover" popover="auto">
        <ul>
          <li hidden><a href="#role-trail">Oakmere Primary School</a></li>
          <li hidden><a href="#role-trail">Spring term 2025</a></li>
          <li hidden><a href="#role-trail">Main hall and music room bookings</a></li>
          <li hidden><a href="#role-trail">Wednesday evening lettings</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#role-trail">Choir rehearsals</a></li>
  </ol>
</nav>
<nav id="role-trail-long" aria-label="Breadcrumb" data-kit-role="trail">
  <ol>
    <li><a href="#role-trail">Clients</a></li>
    <li><a href="#role-trail">Oakmere Primary School Parent–Teacher Association and Friends of the Library Fund</a></li>
  </ol>
</nav>
<p class="specimen-case-line">On a wide screen, the fold and the school switcher wait for the page.</p>
<nav id="role-trail-inert" aria-label="Breadcrumb" data-kit-role="trail" data-kit-fit="pending">
  <ol>
    <li><a href="#role-trail">Clients</a></li>
    <li>
      <a href="#role-trail">Oakmere Primary School</a>
      <button type="button" data-kit-role="icon-action" id="role-trail-inert-switch" data-kit-state="inert" disabled aria-describedby="role-trail-inert-switch-words" popovertarget="role-trail-inert-peers-1" aria-label="Switch school"><svg data-kit-icon="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></button>
      <div id="role-trail-inert-peers-1" data-kit-role="popover" popover="auto">
        <ul>
          <li><a href="#role-trail">Ashgrove Academy</a></li>
          <li><a href="#role-trail" aria-current="page">Oakmere Primary School</a></li>
          <li><a href="#role-trail">Riverside Nursery</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#role-trail">Spring term 2025</a></li>
    <li><a href="#role-trail">Main hall and music room bookings</a></li>
    <li><a href="#role-trail">Wednesday evening lettings</a></li>
    <li data-kit-region="fold" hidden>
      <button type="button" data-kit-role="icon-action" id="role-trail-inert-places" data-kit-state="inert" disabled aria-describedby="role-trail-inert-places-words" popovertarget="role-trail-inert-fold" aria-label="More places"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"/></svg></button>
      <div id="role-trail-inert-fold" data-kit-role="popover" popover="auto">
        <ul>
          <li hidden><a href="#role-trail">Oakmere Primary School</a></li>
          <li hidden><a href="#role-trail">Spring term 2025</a></li>
          <li hidden><a href="#role-trail">Main hall and music room bookings</a></li>
          <li hidden><a href="#role-trail">Wednesday evening lettings</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#role-trail">Choir rehearsals</a></li>
  </ol>
  <p data-kit-region="words" id="role-trail-inert-switch-words">Other schools wait until this page loads.</p>
  <p data-kit-region="words" id="role-trail-inert-places-words">More places wait until this page loads.</p>
</nav>