Create breadcrumbs in OctoberCMS

Let's look at the easiest way to create breadcrumbs. In essence, bread crumbs are a simple array that can be indicated in Twig or PPH code section.

OctoberCMS has a very useful tag {% placeholder %} that allows you to put part of the code from another place by using additional tag {% put %}.

Creating bread crumbs will be made by points.

1) To get started in a place where we will display breadcrumbs, you need to add a placeholder tag:

{% placeholder breadcrumbs %}

2) Let's create a partial called breadcrums.htm in which there will be HTML.

{% set index = 1 %}
<section class="breadcrumbs">
    <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
        {% for page in pages %}
            {% if not loop.last %}
                <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a class="breadcrumbs__link" href="{{ page.url }}" itemprop="item">
                        <span class="breadcrumbs__name" itemprop="name">{{ page.name }}</span>
                    </a>
                    <meta itemprop="position" content="{{ index }}">
                </li> 
                <li class="breadcrumbs__sep"> / </li>
            {% else %}
                <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <span class="breadcrumbs__name" itemprop="name">{{ page.name }}</span>
                    <meta itemprop="position" content="{{ index }}">
                </li>
            {% endif %}
            {% set index = loop.index + 1 %}
        {% endfor %}
    </ol>
</section>

3) Then on each CMS page we will create an array with breadcrumbs and put it to the previously created placeholder. For example, let's take a page of the article and plugin RainLab.blog.

{# Get an article and category from RainLab.blog #}
{% set post = blogPost.post %}
{% set category = post.categories.first %}

{# Create an array of breadcrumbs. It can also be created in the PHP code section, as you like. #}
{% set breadcrumbs = [
    {
        'name':'Home',
        'url':"/",
    },
    {
        'name':'Blog',
        'url':"blog"|page(),
    },
    {
        'name':category.name,
        'url':"blog"|page()~'/'~category.slug,
    },
    {
        'name':post.title
    }
] %}

{# Pass an array to breadcrumbs.htm and output it in the placeholder. #}
{% put breadcrumbs %}
    {% partial 'breadcrumbs' pages=breadcrumbs %}
{% endput %}

4) Add a little CSS for beauty.

.breadcrumbs {
    background: rgba(0,0,0,0.5);
    margin-bottom: 10px
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
    padding: 4px 15px;
    list-style: none;
    box-sizing: border-box
}

.breadcrumbs__sep {
    color: white;
    padding: 0 4px;
    font-size: 11px
}

.breadcrumbs__link {
    color: white;
    font-size: 12px;
    text-decoration: underline
}

.breadcrumbs__link:hover {
    color: white;
    text-decoration: none
}

.breadcrumbs__name {
    color: white;
    font-size: 12px
}

Point #3 must be repeated for each CMS page. In this way, we got a super flexible configuration of breadcrumbs for individual pages where you can use any data from the model, as well as all Twig power. For example, with the conditional operators, check on which page we are and add " - page 2" for the last part of breadcrumbs.