Breadcrumbs for Craft 3

Question

How do you make breadcrumbs in your Twig templates for Craft 3?

Unfortunately I found examples only for Craft 2

Answer 1

When it comes to creating breadcrumbs, I can only offer advice when doing so within a structure.

Craft 3 still has .ancestors available on an entry so you can do:

{% set breadcrumbs = entry.ancestors.all() %}

Then check the length and loop through the ancestors for the structure entry.

{% if breadcrumbs|length %}
    <ul class="breadcrumbs">
        <li><a href="{{ siteUrl }}">Home</a></li>
        {% for crumb in breadcrumbs %}
            <li><a href="{{ crumb.url }}">{{ crumb.title }}</a></li>
        {% endfor %}
        <li>{{ entry.title }}</li>
    </ul>
{% endif %}

Then just add a little CSS to style as you choose.

<style>
  .breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .breadcrumbs li { display: inline; }
  .breadcrumbs li+li:before {
    padding: 8px;
    color: black;
    content: "\000BB";
  }
</style>

This would use » between each entry.

Home » First Article » Another Article » Grandchild Article

Answer 2

Here is something I'm using. It traverses the url segments and loads the associated entry to build the breadcrumb (using Bootstrap 4.x) - Not sure this is the most efficient/correct way, but hopefully this helps someone:

{% if craft.request.segments %}
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ siteUrl }}">Home</a></li>
                {% for segment in craft.request.segments %}
                {% set segmentEntries = craft.entries.slug(segment).find() %}
                {% for segmentEntry in segmentEntries %}
                    {% if segmentEntry.id == entry.id %}
                    <li class="breadcrumb-item">{{ segmentEntry.title }}</li>
                    {% else %}
                    <li class="breadcrumb-item"><a href="{{ segmentEntry.url }}">{{ segmentEntry.title }}</a></li>
                    {% endif %}
                {% endfor %}
                {% endfor %}
              </ol>
            </nav>
        </div>
    </div>
</div>
{% endif %}

Built using code from this thread as inspiration: What is the best way to create breadcrumbs based on a structure?

Answer 3

The verbb navigation plugin has a good breadcrumbs service:

https://github.com/verbb/navigation

Answer 4

Here is a link to the breadcrumb template component for Craft CMS 3. It is automatically created from URL structure.

http://craftsnippets.com/articles/breadcrumb-created-from-url-for-craft-cms

• It creates proper links for entries, categories and any other elements that have their own page.
• It works out of the box. No need to adjust anything unless you are dealing with custom routes instead of regular entries and categories.
• It has proper google structured data and ARIA attributes.