Skip to content
Hugo Templates

Breadcrumbs component

Example

An example of the breadcrumbs component can be seen at the top of this page.

Layout partial template

Link to layout partial template on GitHub(Opens in new window)

<div class="hidden md:block">
  <nav aria-label="Breadcrumb navigation">
    <ul class="flex flex-wrap items-center p-0 -ml-2 list-none">
      {{ range .Ancestors.Reverse }}
        <li>
          <a
            class="px-2 py-1 transition duration-100 ease-linear focus:outline-none focus:ring focus:ring-inset underline-trigger"
            href="{{ .RelPermalink }}"
          >
            <span class="underline-target">
              {{ .Title }}
            </span>
          </a>
        </li>
        <li
          class="inline-flex items-center"
          aria-hidden="true"
        >
          {{ partial "icons/chevron" (dict "color" "text-gray-400") . }}
        </li>
      {{ end }}
      <li>
        <a
          class="px-2 py-1 transition duration-100 ease-linear focus:outline-none focus:ring focus:ring-inset underline-trigger"
          href="{{ .RelPermalink }}"
        >
          <span class="underline-target">
            {{ .Title }}
          </span>
        </a>
      </li>
    </ul>
  </nav>
</div>

Calling the partial

The partial can be called from a template with the following code:

{{ partial "navigation/breadcrumbs" . }}