Breadcrumb Navigation

Anwendungsbeispiel

In diesem Beispiel wird eine Breadcrumb-Navigation erzeugt. Bootstrap lädt automatisch Styles für die CSS Klasse breadcrumb.

Das Element ist frei platzierbar und kann auf allen Templates verwendet werden.

<section class="container px-0" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <ol class="breadcrumb">
       <li class="breadcrumb-item"><a href="/" itemprop="url"><span itemprop="title">Startseite</span></a></li>
       {{ block breadcrumbPath }}
           {{ foreach $part in $wsNavigation.path }}
               {{ var $url = "" }}
               {{ if $part.type == "product" }}
                   {{ $url = $wsViews.url("Product", {productId: $part.object.id}) }}
               {{ else }}
                   {{ $url = $wsViews.url("Category", {id: $part.object.id}) }}
               {{ /if }}

               {{ var $last = $part is $wsNavigation.path|last }}
               <li class="breadcrumb-item">{{ if not $last }}<a href="{{= $url }}" itemprop="url">{{/if}}<span itemprop="title">{{= $part.object.name }}</span>{{ if not $last }}</a>{{/if}}</li>
           {{ /foreach }}
       {{ /block }}
   </ol>
</section>