The breadcrumbs component is used for navigation and to give the user awareness of their location between the different organizations, spaces and applications.
Note: The current page should not be represented in the breadcrumb and is represented in the page header separately.
<ol class="breadcrumbs">
<li class="breadcrumbs-item">
<a class="breadcrumbs-item-link" href="#">overview</a>
</li>
<li class="breadcrumbs-item">
<a class="breadcrumbs-item-link" href="#">my-org</a>
</li>
<li class="breadcrumbs-item">
<a class="breadcrumbs-item-link" href="#">my-space</a>
</li>
<li class="breadcrumbs-item">
<a class="breadcrumbs-item-link" href="#">my-app</a>
</li>
</ol>
<ol class="breadcrumbs">
{% for breadcrumb in breadcrumbs %}
<li class="breadcrumbs-item">
<a class="breadcrumbs-item-link" href="#">{{ breadcrumb.text }}</a>
</li>
{% endfor %}
</ol>
{
"breadcrumbs": [
{
"text": "overview"
},
{
"text": "my-org"
},
{
"text": "my-space"
},
{
"text": "my-app"
}
]
}