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

# Browsing - Navigation between products

> Add product-to-product browsing on detail pages so visitors can move to the previous or next item within a category, including position display.

With the help of the browse function, visitors can navigate directly from the product detail page to the previous or next product within the current category. The navigation also shows the position of the product in the category, for example "4/22".

***

## Modules

The following modules are relevant for the integration:

* [\$wsViews](/en/frontend/referenz/module/wsviews) - Current page information and product context
* [\$wsNavigation](/en/frontend/referenz/module/wsnavigation) - Navigation path (breadcrumb), provides the current category
* [\$wsCategories](/en/frontend/referenz/module/wscategories) - Loads all products of a category

***

## Frontend integration

The following code block is inserted in `components/breadcrumb.htm` directly after the closing `</nav>` tag of the existing breadcrumb.

<Info>
  The browse function only appears on product pages. On all other pages (category, search, etc.) the block is not displayed.
</Info>

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsViews.current.info.product }}
    {{ var $cProductId = $wsViews.current.info.product.base.id
                         | ifNull($wsViews.current.info.product.id) }}

    {{ var $cNavCatId = "" }}
    {{ foreach $cPart in $wsNavigation.path }}
        {{ if $cPart.type == "category" }}
            {{ $cNavCatId = $cPart.object.id }}
        {{ /if }}
    {{ /foreach }}

    {{ if $cNavCatId }}
        {{ var $cCatProducts = $wsCategories.loadProducts($cNavCatId) }}
        {{ var $cPrevProduct = null }}
        {{ var $cNextProduct = null }}
        {{ var $cCurrentPos = 0 }}
        {{ var $cCounter = 0 }}
        {{ var $cTotal = len($cCatProducts) }}

        {{ foreach $cCatProduct in $cCatProducts }}
            {{ var $cCompareId = $cCatProduct.base.id | ifNull($cCatProduct.id) }}
            {{ if $cCompareId == $cProductId }}
                {{ $cCurrentPos = $cCounter }}
            {{ /if }}
            {{ $cCounter = $cCounter + 1 }}
        {{ /foreach }}

        {{ if $cCurrentPos > 0 }}
            {{ $cPrevProduct = $cCatProducts[$cCurrentPos - 1] }}
        {{ /if }}
        {{ if $cCurrentPos < $cTotal - 1 }}
            {{ $cNextProduct = $cCatProducts[$cCurrentPos + 1] }}
        {{ /if }}

        <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 12px;">

            {{ if $cPrevProduct }}
                <a href="{{= $wsViews.url('Product', {productId: $cPrevProduct.id}) }}"
                   aria-label="Previous product"
                   style="display: inline-flex; align-items: center; justify-content: center;
                          width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 4px;
                          text-decoration: none; color: inherit;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
                            5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </a>
            {{ else }}
                <span style="display: inline-flex; align-items: center; justify-content: center;
                             width: 32px; height: 32px; border: 1px solid #eee; border-radius: 4px;
                             color: #ccc; cursor: not-allowed;"
                      aria-disabled="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
                            5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </span>
            {{ /if }}

            <span style="font-size: 13px; color: #888;">
                {{= $cCurrentPos + 1 }}/{{= $cTotal }}
            </span>

            {{ if $cNextProduct }}
                <a href="{{= $wsViews.url('Product', {productId: $cNextProduct.id}) }}"
                   aria-label="Next product"
                   style="display: inline-flex; align-items: center; justify-content: center;
                          width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 4px;
                          text-decoration: none; color: inherit;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1
                            0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </a>
            {{ else }}
                <span style="display: inline-flex; align-items: center; justify-content: center;
                             width: 32px; height: 32px; border: 1px solid #eee; border-radius: 4px;
                             color: #ccc; cursor: not-allowed;"
                      aria-disabled="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1
                            0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </span>
            {{ /if }}

        </div>
    {{ /if }}
{{ /if }}
```

***

## Further links

* [\$wsViews](https://dokumentation.websale.de/frontend/referenz/module/wsviews)
* [\$wsNavigation](https://dokumentation.websale.de/frontend/referenz/module/wsnavigation)
* [\$wsCategories](https://dokumentation.websale.de/frontend/referenz/module/wscategories)