> ## 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.

# $wsNavigation - Breadcrumb

> Modul $wsNavigation für die Breadcrumb-Navigation: aktuellen Pfad in der Kategoriestruktur auslesen und im Frontend als Navigation darstellen.

Mit dem `$wsNavigation` Modul können Sie den aktuellen Navigationspfad (Breadcrumb) des Kunden im Shop auslesen und anzeigen. Der Breadcrumb zeigt dem Kunden, wo er sich in der Kategoriestruktur befindet, und ermöglicht eine einfache Navigation zu übergeordneten Kategorien.

***

## Modulübersicht

Beispiel / Ausschnitt über `$wsNavigation`

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{= $wsNavigation | json }}
```

**JSON-Ausgabe**

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "path": [
    {
      "type": "category",
      "object": {
        "id": "...",
        "name": "...",
        "descr": "...",
        "active": "...",
        "hidden": false,
        "productsCount": 0,
        "custom": { },
        "timestampCreatedAt": "...",
        "timestampUpdatedAt": "...",
        "productAssignmentType": "...",
        "productRules": "..."
      }
    }
  ]
}
```

**Variablen in der Übersicht**

| **Variable**  | **Typ** | **Beschreibung**                                                    |
| ------------- | ------- | ------------------------------------------------------------------- |
| `path`        | array   | Pfad im Kategoriebaum, der angibt, wohin man im Shop navigiert hat. |
| `[$i].type`   | string  | Typ der entsprechenden Position im Pfad.                            |
| `[$i].object` | map     | Kategorie-bzw. Produkt-Map.                                         |

<Note>
  Hinweis: Die Eigenschaften von `object` hängen vom `type` ab:

  * Bei type `category` stehen alle Eigenschaften aus `$wsCategories` zur Verfügung.
  * Bei type `product` stehen alle Eigenschaften aus `$wsProducts` zur Verfügung.
  * Nur das letzte Element im Pfad kann vom Typ `product` sein.
</Note>

***

## Templates

Standardmäßig wird der Breadcrumb in einer eigenen Datei breadcrumb.htm geladen, damit derselbe Breadcrumb überall im Shop angezeigt werden kann. Diese Datei wird typischerweise im Layout-Template eingebunden.

***

## Variablen

### \$wsNavigation.path

Liste der Navigationselemente (Breadcrumb) von der Startseite bis zur aktuellen Position.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Pfad: {{= $wsNavigation.path | json }}
```

#### $wsNavigation.path\[$i].type

Gibt den Typ der Position im Pfad aus: `"category"` oder `"product"`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Typ: {{= $wsNavigation.path[0].type }}
```

#### $wsNavigation.path\[$i].object

Gibt die Kategorie- bzw. Produkt-Map aus. Bei Kategorien entspricht dieser der Category-Map, bei Produkten der Product-Map. So kann auf Eigenschaften wie `name`, `id` oder `custom` zugegriffen werden.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Name: {{= $wsNavigation.path[0].object.name }}
```

***

## Methoden

Für `$wsNavigation` stehen keine Methoden zur Verfügung.

***

## Aktionen

Für `$wsNavigation` stehen keine Aktionen zur Verfügung.

***

## Beispiele für die Verwendung der Navigationsdaten

### Breadcrumb-Navigation

Um die verfügbaren Daten der Breadcrumb-Navigation einzusehen, können Sie sich diese in einem JSON-ähnlichen Format ausgeben lassen. Dies ist hilfreich, um die Struktur und Inhalte der Breadcrumb-Navigation zu verstehen oder auch Fehler zu debuggen.

### Beispiel für die Anzeige des Breadcrumbs

In diesem Beispiel wird mittels des `$wsNavigation` Moduls die aktuelle Position des Shop-Kunden in der Menüstruktur der gerade besuchten Seite angezeigt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ 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 }}
   <span itemprop="title">{{= $part.object.name }}</span>
{{ /foreach }
```

### Beispiel für Verlinkungen erzeugen

In diesem Beispiel wird gezeigt wie das letzte Element eines Breadcrumbs mit oder ohne Verlinkung erzeugt wird.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $part in $wsNavigation.path }}
    {{ var $url = "" }}
    ...
    {{ var $last = $part is $wsNavigation.path|last }}
   {{ if not $last }}<a href="{{= $url }}" itemprop="url">{{/if}}
      <span itemprop="title">{{= $part.object.name }}</span>
   {{ if not $last }}</a>{{/if}}
{{ /foreach }}
```

***

## Weiterführende Links

* [Breadcrumb Navigation](/frontend/praxisbeispiele/navigation-und-menustrukturen/breadcrumb-navigation)
* [Hauptmenü Navigation](/frontend/praxisbeispiele/navigation-und-menustrukturen/hauptmenu-navigation)
* [MultiPage Checkout](/frontend/praxisbeispiele/bestellablauf-bestellfunktionen/multipage-checkout)
* [Blätterfunktion](/frontend/praxisbeispiele/kategorien-suche/blatterfunktion)