2

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

Unfortunately I found examples only for Craft 2

Improve this question
4

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 &raquo; between each entry.

Home » First Article » Another Article » Grandchild Article

Improve this answer
3
  • What is the default([]) good for? The default return value from all is an empty array. Could you please explain the sense of that filter? – Robin Schambach Jun 11 '18 at 5:12
  • That’s a great point @RobinSchambach. I think I just had that left in there as a precautionary measure in an older project but I’ve edited it out of my answer since it is superfluous and could just bring confusion. – Tim Knight Jun 11 '18 at 10:13
  • This is a good solution for the structure. But if we use singles, channels, this solution does not work. And it seems there is no universal solution, maybe I'm wrong. – Sol Jun 13 '18 at 1:16
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?

Improve this answer
1

The verbb navigation plugin has a good breadcrumbs service:

https://github.com/verbb/navigation

Improve this answer
1

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.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.