Breadcrumb


alt text

Generate a simple breadcrumb from a URL. It's a good fit for websites that have descriptive and meaningful URLs.

As an example, if your website URL looked like this:

https://mysite.local/posts/categories/example-category

Breadcrumb would generate the following array:

array (size=4)
  0 =>
    array (size=3)
      'title' => string 'Home' (length=4)
      'url' => string 'https://mysite.local' (length=18)
      'position' => int 1
  1 =>
    array (size=3)
      'title' => string 'Posts' (length=5)
      'url' => string 'https://mysite.local/posts' (length=24)
      'position' => int 2
  2 =>
    array (size=3)
      'title' => string 'Categories' (length=10)
      'url' => string 'https://mysite.local/posts/categories' (length=35)
      'position' => int 3
  3 =>
    array (size=3)
      'title' => string 'Example Category' (length=11)
      'url' => string 'https://mysite.local/posts/categories/example-category' (length=52)
      'position' => int 4

With the Breadcrumb array, you can now use Twig to define the look and apply additional logic to the output. Here's a basic example:

{% set breadcrumb = craft.breadcrumb.config %}

{% if breadcrumb %}
<div class="c-breadcrumb">
    <ol class="c-breadcrumb__items">
        {% for crumb in breadcrumb  %}
            {% if loop.last %}
            <li class="c-breadcrumb__item">
                <span>{{ crumb.title }}</span>
            </li>
            {% else %}
            <li class="c-breadcrumb__item">
                <a class="c-breadcrumb__link" href="{{ crumb.url }}">
                    <span>{{ crumb.title }}</span>
                </a>
            </li>
            {% endif %}
        {% endfor %}
    </ol>
</div>
{% endif %}

Breadcrumb might not be right for your project...

  • If you don't have templates defined for each URL segment

  • If your URLs don't make sense to a human

  • If you want to customise each title in the breadcrumb

Make sure you check the documentation before installing.


Free

Package Name

To install this plugin, search for its package name on the Plugin Store and click “Install”.


Information

Report an issue