Template: header
Template: markdown

Creating breadcrumbs

Leverage the doc.collection.parents property along with the doc.collection.index property to dynamically create a breadcrumb for the current document.

  • doc.collection.parents: A list of the document's collection ancestors
  • doc.collection.index: A document within the collection whose basename is "index", or simply the first document in the collection's directory

The following code snippet will output the current document's collection, and its ancestors, in reverse order, suitable for rendering a breadcrumb.

<ul>
  {% for collection in doc.collection.parents|reverse %}
    <li>
      <a href="{{collection.index.url.path}}">
        {{collection.index.fields.title}}
      </a>
    </li>
  {% endfor %}
  <li>
    <a href="{{doc.collection.index.url.path}}">
      {{doc.collection.index.fields.title}}
    </a>
  </li>
</ul>
Template: footer