<nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Pfadnavigation</h2>
<ol>
<li>
<a href="#lorem">Home</a>
<i class="far fa-arrow-right "></i> </li>
<li>
<a href="#lorem">School</a>
<i class="far fa-arrow-right "></i> </li>
<li>
<a href="#lorem">Über Uns</a>
<i class="far fa-arrow-right "></i> </li>
</ol>
</nav>
<nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Pfadnavigation</h2>
<ol>
{% for item in items %}
<li>
<a href="{{ item.link }}">{{ item.name }}</a>
{% render "@components/01-core/icon/icon.twig" with {
icon_type: item.icon_type,
icon_id: item.icon_id,
icon_options: item.icon_options
} %}
</li>
{% endfor %}
</ol>
</nav>
{
"items": [
{
"item": null,
"name": "Home",
"link": "#lorem",
"icon_id": "fa-arrow-right",
"icon_type": "far",
"icon_options": ""
},
{
"item": null,
"name": "School",
"link": "#lorem",
"icon_id": "fa-arrow-right",
"icon_type": "far",
"icon_options": ""
},
{
"item": null,
"name": "Über Uns",
"link": "#lorem",
"icon_id": "fa-arrow-right",
"icon_type": "far",
"icon_options": ""
}
]
}
.breadcrumb {
background: transparent;
padding: 0;
margin: 0;
position: relative;
z-index: 3;
display: none;
@include media-breakpoint-up(md) {
display: block;
}
ol {
display: flex;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
li {
margin-right: 0.5rem;
display: flex;
flex-wrap: nowrap;
align-items: center;
color: $dark-blue;
white-space: nowrap;
i,
svg {
color: $primary;
margin-left: 0.5rem;
}
> a {
display: block;
color: inherit;
&:hover {
color: $primary;
}
}
&:last-child {
i,
svg {
display: none;
}
&::after {
content: ":";
color: $primary;
font-weight: bold;
margin-left: 0.5rem;
}
}
}
}
}
There are no notes for this item.