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

> Reference for $wsNavigation: read and display the customer's current breadcrumb path so visitors can jump to parent categories in the shop.

With the `$wsNavigation` module, you can read out and display the customer's current navigation path (breadcrumb) in the shop. The breadcrumb shows the customer where they are in the category structure and enables easy navigation to parent categories.

***

## Module overview

Example / excerpt of `$wsNavigation`

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

**JSON output**

```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": "..."
      }
    }
  ]
}
```

**Variables overview**

| **Variable**  | **Type** | **Description**                                                             |
| ------------- | -------- | --------------------------------------------------------------------------- |
| `path`        | array    | Path in the category tree, indicating where you have navigated in the shop. |
| `[$i].type`   | string   | Type of the corresponding position in the path.                             |
| `[$i].object` | map      | Category or product map.                                                    |

<Note>
  Note: The properties of `object` depend on the `type`:

  * For type `category`, all properties from `$wsCategories` are available.
  * For type `product`, all properties from `$wsProducts` are available.
  * Only the last element in the path can be of type `product`.
</Note>

***

## Templates

By default, the breadcrumb is loaded in a separate file breadcrumb.htm so that the same breadcrumb can be displayed everywhere in the shop. This file is typically included in the layout template.

***

## Variables

### \$wsNavigation.path

List of navigation elements (breadcrumb) from the home page to the current position.

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

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

Returns the type of the position in the path: `"category"` or `"product"`.

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

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

Returns the category or product map. For categories, this corresponds to the category map; for products, the product map. You can thus access properties such as `name`, `id`, or `custom`.

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

***

## Methods

No methods are available for `$wsNavigation`.

***

## Actions

No actions are available for `$wsNavigation`.

***

## Examples for using the navigation data

### Breadcrumb navigation

To view the available data of the breadcrumb navigation, you can have it output in a JSON-like format. This is helpful to understand the structure and contents of the breadcrumb navigation or to debug errors.

### Example for displaying the breadcrumb

In this example, the `$wsNavigation` module is used to display the current position of the shop customer in the menu structure of the page they are visiting.

```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 }
```

### Example for generating links

This example shows how the last element of a breadcrumb is generated with or without a link.

```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 }}
```

***

## Related links

* [Breadcrumb navigation](/en/frontend/praxisbeispiele/navigation-und-menustrukturen/breadcrumb-navigation)
* [Main menu navigation](/en/frontend/praxisbeispiele/navigation-und-menustrukturen/hauptmenu-navigation)
* [MultiPage checkout](/en/frontend/praxisbeispiele/bestellablauf-bestellfunktionen/multipage-checkout)
* [Pagination function](/en/frontend/praxisbeispiele/kategorien-suche/blatterfunktion)