_navigation_breadcrumb.scss

@use "../abstracts/" as *;

.mod_breadcrumb {
  @include wrapper-inside;
  ul {
    margin-block: 0.5rem 4rem;
    padding-inline: 0;
    list-style: none;
    display: flex;
    gap: 0.5rem;
    font-size: $font-size-smaller;

    li:not(:first-of-type):before {
      padding-inline-end: 0.5rem;
      content: ">";
    }
    a {
      text-decoration: none;
    }
    svg {
      width: 1.125rem;
      height: auto;
    }
  }
}

body.no-breadcrumb {
  .mod_breadcrumb {
    display: none;
  }
}

Twig-Template

Anpassung im Twig-Template: ein Häuschen als Icon für die Startseite

mod_breadcrumb.html.twig

{% extends "@Contao/mod_breadcrumb.html.twig" %}

{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.
#}

  {% block content %}
      <ul>
          {% for item in items %}
              {% if item.isActive %}
                  <li class="active" aria-current="page">{{ item.link|insert_tag }}</li>
              {% else %}
                  {% if loop.first %}
                      <li><a href="{{ item.href|insert_tag }}">{{source('svgicons/home.html5')}}</a></li>
                  {% else %}
                      <li><a href="{{ item.href|insert_tag }}">{{ item.link|insert_tag }}</a></li>
                  {% endif %}
              {% endif %}
          {% endfor %}
      </ul>
  {% endblock %}