Barrio Breadcrumbs implementation different to Bootstrap framework

Created on 28 November 2023, 7 months ago

bootstrap breadcrumbs are documented here https://getbootstrap.com/docs/4.0/components/breadcrumb/#overview

e.g.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

From what I can see the current page is missing from the implementation.

Looking at Umami demo it appears to me as if that is similar to how bootstrap works. e.g.

{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
#}
{% if breadcrumb %}
  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
    <ol>
    {% for item in breadcrumb %}
      <li>
        {% if item.url %}
          <a href="{{ item.url }}">{{ item.text }}</a>
        {% else %}
          {{ item.text }}
        {% endif %}
      </li>
    {% endfor %}
    {#
      Once the breadcrumb loop completes, we add the current page title.
      This variable is created in umami.theme.
    #}
    <li> {{ current_page_title }}</li>
    </ol>
  </nav>
{% endif %}

e.g.

{% if breadcrumb %}
  <nav role="navigation" aria-label="breadcrumb" style="{{breadcrumb_divider}}">
    <ol class="breadcrumb">
    {% for item in breadcrumb %}
      {% if item.url %}
        <li class="breadcrumb-item">
          <a href="{{ item.url }}">{{ item.text }}</a>
        </li>
      {% endif %}
    {% endfor %}
     {% if current_page_title %}
        <li class="breadcrumb-item active">
          {{ current_page_title }}
        </li>
      {% endif %}
    </ol>
  </nav>
{% endif %}
✨ Feature request
Status

Active

Version

5.5

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom 2dareis2do

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024