Breadcrumbs

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"
    }
  ]
}
  • Handle: @breadcrumbs
  • Preview:
  • Filesystem Path: docs/src/components/components/breadcrumbs/breadcrumbs.html