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

<p>Craft 3 still has <code>.ancestors</code> available on an entry so you can do:</p>

<pre><code>{% set breadcrumbs = entry.ancestors.all() %}
</code></pre>

<p>Then check the length and loop through the ancestors for the structure entry.</p>

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

<p>Then just add a little CSS to style as you choose.</p>

<pre><code>&lt;style&gt;
  .breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
  }

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

<p>This would use <code>&amp;raquo;</code> between each entry.</p>

<p>Home » First Article » Another Article » Grandchild Article</p>

CC BY-SA 4.0
2018-06-11T05:12:02.153Z
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
CC BY-SA 4.0
2018-06-11T10:13:20.310Z
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
CC BY-SA 4.0
2018-06-13T01:16:19.163Z
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
CC BY-SA 4.0
2018-06-11T02:04:22.320Z
2018-06-11T10:11:16.177Z
2018-06-11T10:11:16.177Z
Tim Knight
<p>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:</p>

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

<p>Built using code from this thread as inspiration: <a href="https://craftcms.stackexchange.com/questions/1655/what-is-the-best-way-to-create-breadcrumbs-based-on-a-structure">What is the best way to create breadcrumbs based on a structure?</a></p>

CC BY-SA 4.0
2018-11-19T03:56:05.850Z
2018-11-19T03:56:05.850Z
Adrian
<p>The verbb navigation plugin has a good breadcrumbs service:</p>

<p><a href="https://github.com/verbb/navigation" rel="nofollow noreferrer">https://github.com/verbb/navigation</a></p>

CC BY-SA 4.0
2018-11-19T15:22:01.673Z
2018-11-19T15:22:01.673Z
Steven Vandemoortele
<p>Here is a link to the breadcrumb template component for Craft CMS 3. It is automatically created from URL structure. </p>

<p><a href="http://craftsnippets.com/articles/breadcrumb-created-from-url-for-craft-cms" rel="nofollow noreferrer">http://craftsnippets.com/articles/breadcrumb-created-from-url-for-craft-cms</a></p>

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

CC BY-SA 4.0
2019-04-05T18:58:40.970Z
2019-04-15T01:57:11.257Z
2019-04-15T01:57:11.257Z
Piotr Pogorzelski
<p>How do you make breadcrumbs in your Twig templates for Craft 3?</p>

<p>Unfortunately I found examples only for Craft 2</p>

<templating><craft3>
Breadcrumbs for Craft 3
# Breadcrumbs for Craft 3

(Asked by: username_0 on 2018-06-10)

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

Unfortunately I found examples only for Craft 2

**Tags:** templating, craft3

---

## 4 answers

### Answer by username_1 on 2018-06-11. Score: 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 %}
    
        Home
        {% for crumb in breadcrumbs %}
            {{ crumb.title }}
        {% endfor %}
        {{ entry.title }}
    
{% endif %}

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


This would use » between each entry.
Home » First Article » Another Article » Grandchild Article

> **Comments:**
> **username_2**: 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?  
> **username_1**: 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.  
> **username_0**: 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.  

---

### Answer by username_3 on 2018-11-19. Score: 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 %}

    
        
            
              
                Home
                {% for segment in craft.request.segments %}
                {% set segmentEntries = craft.entries.slug(segment).find() %}
                {% for segmentEntry in segmentEntries %}
                    {% if segmentEntry.id == entry.id %}
                    {{ segmentEntry.title }}
                    {% else %}
                    {{ segmentEntry.title }}
                    {% endif %}
                {% endfor %}
                {% endfor %}
              
            
        
    

{% endif %}

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


---

### Answer by username_4 on 2018-11-19. Score: 1

The verbb navigation plugin has a good breadcrumbs service:

<https://github.com/verbb/navigation>


---

### Answer by username_5 on 2019-04-05. Score: 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.


---

