<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="#">Link 1</a></li>
<li class="breadcrumb-item active"><a href="#">Link 2</a></li>
<li class="breadcrumb-item">Current Page</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
{% for bread_item in bread_items %}
<li class="breadcrumb-item{% if bread_item.url %} active{% endif %}">{% if bread_item.url %}<a href="{{ bread_item.url }}">{% endif %}{{ bread_item.text }}{% if bread_item.url %}</a>{% endif %}</li>
{% endfor %}
</ol>
</nav>
{
"bread_items": {
"1": {
"text": "Link 1",
"url": "#"
},
"2": {
"text": "Link 2",
"url": "#"
},
"3": {
"text": "Current Page",
"url": ""
}
}
}
.breadcrumb {
background-color: unset;
padding: 0;
border-radius: 0;
&-item {
font-size: .875rem;
a {
font-size: .875rem;
color: $hyperlink_breadcrumb;
font-weight: normal;
border-bottom: 0;
.color-scheme-dark & {
color: $hyperlink_darkmode;
color: var(--hyperlink_darkmode, $hyperlink_darkmode);
}
}
}
}
Display for the breadcrumb navigation.