> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Breadcrumb navigation

> Build a breadcrumb navigation in WEBSALE templates that uses Bootstrap's breadcrumb CSS class and can be placed freely on any template.

## Usage example

In this example, a breadcrumb navigation is created. Bootstrap automatically loads styles for the CSS class `breadcrumb`.

The element can be placed freely and used on all templates.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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">Home</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>
```


## Related topics

- [$wsNavigation - Breadcrumb](/en/frontend/referenz/module/wsnavigation.md)
- [$wsCategories - Categories](/en/frontend/referenz/module/wscategories.md)
- [$wsCategories - Kategorien](/frontend/referenz/module/wscategories.md)
- [Browsing - Navigation between products](/en/frontend/funktionsubersicht/blaettern-von-produkt-zu-produkt.md)
- [Blättern - Navigation zwischen Produkten](/frontend/funktionsubersicht/blaettern-von-produkt-zu-produkt.md)