Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-11T05:12:02.153Z
Answers.Text: 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?
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-11T10:13:20.310Z
Answers.Text: 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.
Answers.UserDisplayName: Tim Knight
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-13T01:16:19.163Z
Answers.Text: 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.
Answers.UserDisplayName: Sol
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-11T02:04:22.320Z
Answers.LastActivityDate: 2018-06-11T10:11:16.177Z
Answers.LastEditDate: 2018-06-11T10:11:16.177Z
Answers.UserDisplayName: Tim Knight
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-19T03:56:05.850Z
Answers.LastActivityDate: 2018-11-19T03:56:05.850Z
Answers.UserDisplayName: Adrian
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-19T15:22:01.673Z
Answers.LastActivityDate: 2018-11-19T15:22:01.673Z
Answers.UserDisplayName: Steven Vandemoortele
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-04-05T18:58:40.970Z
Answers.LastActivityDate: 2019-04-15T01:57:11.257Z
Answers.LastEditDate: 2019-04-15T01:57:11.257Z
Answers.UserDisplayName: Piotr Pogorzelski
Body: <p>How do you make breadcrumbs in your Twig templates for Craft 3?</p>
  
  <p>Unfortunately I found examples only for Craft 2</p>
  
Tags: <templating><craft3>
Title: Breadcrumbs for Craft 3
ThreadText: # 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 %}
      <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
  
  > **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 @username_2. 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 %}
  <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?](https://craftcms.stackexchange.com/questions/1655/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.
  
  
  ---
  
  