{
"breadcrumb": [
{
"url": "http://bing.com",
"text": "This is item one"
},
{
"url": "http://bing.com",
"text": "Two"
},
{
"url": "http://bing.com",
"text": "This is 3"
},
{
"url": "http://bing.com",
"text": "Karate School"
}
]
}
// Breadcrumbs
//
// Styles for the Breadcrumbs Component.
// Import site utilities.
@import '../../00-global/utils/init';
.breadcrumb {
width: 100%;
display: none;
flex-wrap: wrap;
justify-content: flex-start;
@include breakpoint($bp-sm) {
display: flex;
}
}
.breadcrumb--container {
padding: 0.5rem 0;
display: none;
@include breakpoint($bp-sm) {
display: block;
}
}
.breadcrumb__item {
color: $color-black;
font-size: 1rem;
margin-left: 0.75rem;
position: relative;
text-decoration: none;
a {
color: $color-black;
}
&:first-child {
margin: 0;
}
&::after {
content: '>';
margin-left: 0.5rem;
}
&:last-child {
&::after {
display: none;
}
}
}
{{ attach_library('@theme/breadcrumb') }}
{% if breadcrumb %}
<nav role="navigation" aria-labelledby="system-breadcrumb" class="breadcrumb--container">
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<ol class="breadcrumb">
{% for item in breadcrumb %}
<li class="breadcrumb__item">
{% if item.url %}
<a href="{{ item.url }}">{{ item.text }}</a>
{% else %}
<span class="breadcrumb__current">{{ item.text }}</span>
{% endif %}
</li>
{% endfor %}
</ol>
</nav>
{% endif %}
breadcrumb:
- text: About
url: "#"
- text: Dimensions of Energy
url: "#"
- text: Current Page
url: ""
{#
/**
* @file
* Theme override for a breadcrumb trail.
*
* Available variables:
* - breadcrumb: Breadcrumb trail items.
*/
#}
{%
include '@theme/breadcrumb/breadcrumb.twig' with {
breadcrumb: breadcrumb
} only
%}