Breadcrumbs - Component

View full screen
Code

Source (Nunjucks)

<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul class="breadcrumbs__list" role="list">
    <li>
      <a href="/">
        {% raw %}
        <!-- USE THIS IN THE MAIN SITE: {{ svg('../../images/lockup.svg', {label: 'web.dev'}) }} -->
        {% endraw %}
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 28.5" enable-background="new 0 0 125 28.5"><path d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7" fill-rule="evenodd" clip-rule="evenodd" fill="#00c9db"/><g transform="translate(.639 .717)"><defs><filter id="a" filterUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y=".1" width="16.1" height="22.3" id="b"><path d="M0 .1h16.1v22.3H0V.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" filter="url(#a)"/></mask><path d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11" mask="url(#b)" fill-rule="evenodd" clip-rule="evenodd" fill="#0d55ff"/></g><path d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9" fill-rule="evenodd" clip-rule="evenodd" fill="#7000f2"/><path d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z" fill-rule="evenodd" clip-rule="evenodd" class="brand-primary" fill="#5f6368"/></svg>
      </a>
    </li>
    <li>
      <a href="/learn/">Learn</a>
    </li>
    <li>
      <a href="/learn/css/">CSS</a>
    </li>
  </ul>
</nav>

Output

<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul class="breadcrumbs__list" role="list">
    <li>
      <a href="/">
        <!-- USE THIS IN THE MAIN SITE: {{ svg('../../images/lockup.svg', {label: 'web.dev'}) }} -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 125 28.5"
          enable-background="new 0 0 125 28.5"
        >
          <path
            d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#00c9db"
          />
          <g transform="translate(.639 .717)">
            <defs>
              <filter
                id="a"
                filterUnits="userSpaceOnUse"
                x="0"
                y=".1"
                width="16.1"
                height="22.3"
              >
                <feColorMatrix
                  values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
                />
              </filter>
            </defs>
            <mask
              maskUnits="userSpaceOnUse"
              x="0"
              y=".1"
              width="16.1"
              height="22.3"
              id="b"
            >
              <path
                d="M0 .1h16.1v22.3H0V.1z"
                fill-rule="evenodd"
                clip-rule="evenodd"
                fill="#fff"
                filter="url(#a)"
              />
            </mask>
            <path
              d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11"
              mask="url(#b)"
              fill-rule="evenodd"
              clip-rule="evenodd"
              fill="#0d55ff"
            />
          </g>
          <path
            d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#7000f2"
          />
          <path
            d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            class="brand-primary"
            fill="#5f6368"
          />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn/">Learn</a>
    </li>
    <li>
      <a href="/learn/css/">CSS</a>
    </li>
  </ul>
</nav>

Information

A simple navigation pattern that adds spacing and decoration between each item. Beware that there is now flex wrapping, so try to keep this as succinct as possible.

Key links