Web developer notes WTT

Create breadcrumbs in OctoberCMS

  1. Home
  3. Blog
  5. October CMS
  7. Create breadcrumbs in OctoberCMS

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

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

Creating breadcrumbs will be done step by step.

1) To get started, in the 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.

Wave