Styleguide

Breadcrumb 

<section class="d-none d-md-block m-0 py-2 bg-gray-200">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav id="breadcrumb" aria-label="breadcrumb">
                    <small>
                        <ul class="d-flex flex-col list-unstyled m-0 p-0" vocab="https://schema.org/" typeof="BreadcrumbList" aria-label="Breadcrumb navigation">
                            <li class="d-inline-block" property="itemListElement" typeof="ListItem">
                                <a property="item" typeof="WebPage" href="/">
                                    <span property="name">Willkommen</span>
                                </a>
                                <meta property="position" content="0" />
                            </li>
                            <li class="d-inline-block"><span class="mx-1">/</span></li>
                            <li class="d-inline-block" property="itemListElement" typeof="ListItem">
                                <a property="item" typeof="WebPage" href="/smart-logistics-system">
                                    <span property="name">Produkt</span>
                                </a>
                                <meta property="position" content="1" />
                            </li>
                            <li class="d-inline-block"><span class="mx-1">/</span></li>
                            <li class="d-inline-block" property="itemListElement" typeof="ListItem">
                                <a property="item" typeof="WebPage" href="/smart-logistics-system/lager">
                                    <span property="name">Lager</span>
                                </a>
                                <meta property="position" content="2" />
                            </li>
                        </ul>
                    </small>
                </nav>
            </div>
        </div>
    </div>
</section>
 
<section class="d-none d-md-block m-0 py-2 bg-gray-200">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <nav id="breadcrumb" aria-label="breadcrumb">
          <small>
            <ul
              class="d-flex flex-col list-unstyled m-0 p-0"
              vocab="https://schema.org/"
              typeof="BreadcrumbList"
              aria-label="Breadcrumb navigation"
            >
              {{#each item}}
                {{#unless @first}}
                  <li class="d-inline-block"><span class="mx-1">/</span></li>
                {{/unless}}
                <li
                  class="d-inline-block"
                  property="itemListElement"
                  typeof="ListItem"
                >
                  <a property="item" typeof="WebPage" href="{{href}}">
                    <span property="name">{{text}}</span>
                  </a>
                  <meta property="position" content="{{@index}}" />
                </li>
              {{/each}}
            </ul>
          </small>
        </nav>
      </div>
    </div>
  </div>
</section>
 
{
  "item": [
    {
      "href": "/",
      "text": "Willkommen"
    },
    {
      "href": "/smart-logistics-system",
      "text": "Produkt"
    },
    {
      "href": "/smart-logistics-system/lager",
      "text": "Lager"
    }
  ]
}

No notes defined.