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

# Automatically generated product menu

> How to have WEBSALE V8s generate a hierarchical list menu for the product catalog with WS-ProductMenu() and WS-ProductMenuIndex().

The automatically generated product menu is a hierarchical list menu. The menu tree consists of nested `<ul>` unordered lists with one `<li>` entry per navigation item, that is, per category.

The advantage over individual positioning lies in the effort. You specify a single tag; the shop generates the complete HTML at runtime. So you do not have to set up the navigation items individually, and new categories appear without any change to the template.

Styling also remains in your hands. The shop automatically assigns each navigation item style classes for the different display states, that is, opened, closed, and selected. You define these classes in your styles file.

Two tags are available for the structure:

| Tag | Purpose |
| - | - |
| `WS-ProductMenu()` | Product main menu, displayed up to a specific menu level |
| `WS-ProductMenuIndex()` | Submenu for specific menu levels based on a category index value |

You may use both tags multiple times at different positions in a template, each with its own parameter values.

> [!NOTE]
>
> Include the product menu in all shop templates that are to provide access to the product catalog. A template without this tag shows no catalog navigation.

## Product main menu up to a specific menu level

You generate the main menu with `WS-ProductMenu()`. The following example shows a menu placed on the left in a sidebar that displays only the topmost level directly.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProductMenu(sidebar_mainmenu,1,1,show,no,0)~
```

![Pm Autobeispiel1](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=ee4e0597caeee0a5ef60dceccac7d919)

| No. | Value in the example | Meaning |
| - | - | - |
| 1 | `sidebar_mainmenu` | Descriptive name of the menu, here a sidebar-positioned main menu. It is output as the ID of the surrounding `div`. |
| 2 | `1` | Start level is the topmost menu level. |
| 3 | `1` | Last directly displayed menu level is level 1. |
| 4 | `show` | The next level below the current menu level is additionally displayed as soon as it is opened. |
| 5 | `no` | No `onMouseOver` and `onMouseOut` events are generated. The menu therefore consists of links without graphics. |
| 6 | `0` | Categories outside the selected subtree receive no class assignment. With a different value they would receive the `opened` class like the currently opened categories. |

The shop generates the following code schematically from this:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- The first parameter of the tag becomes the ID of the div container, the style class is set automatically by the shop -->
<div id="sidebar_mainmenu" class="ws_menu">
   <!-- Unordered list for the navigation items of the first menu level -->
   <ul class="level1">
        <li class="level1_li_1"><a href="http://Your_domain_name.websale.biz/Reiter.htm" title="Reiter">Reiter</a>
        </li>

        <li class="level1_li_2"><a href="http://Your_domain_name.websale.biz/Pferd.htm" title="Pferd">Pferd</a>
        </li>

        <li class="level1_li_3"><a href="http://Your_domain_name.websale.biz/Stall-%26-Weide.htm" title="Stall &amp; Weide">Stall &amp; Weide</a>
        </li>

        <li class="level1_li_4"><a href="http://Your_domain_name.websale.biz/NEU.htm" title="Neuheiten">Neuheiten</a>
        </li>

        <li class="level1_li_5"><a href="http://Your_domain_name.websale.biz/Aktionen.htm" title="Aktionen">Aktionen</a>
        </li>
   </ul>
</div>
```

Each `<li>` is automatically given a style class. It is composed of the name of the current level and a running variable, in the example `level1_li_1` to `level1_li_5`. You add these classes to your styles file and design them to your liking.

If two levels are to be directly visible, that is, the main categories and their direct subcategories, set the third parameter to `2`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProductMenu(sidebar_mainmenu,1,2,show,no,0)~
```

Reference: WS-ProductMenu()&#x20;

![Pm Autobeispiel1variante](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/pm_autobeispiel1variante.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=2785b040f5946ebde4f0324dfeaa7f8c)

## Submenu based on an index value

If your main menu is horizontal at the top of the page, you need a second, standalone menu for the subcategories. This is exactly what `WS-ProductMenuIndex()` is for. This tag does not build a menu from the topmost level but from a category that you identify via its index value.

In the following example, a vertical submenu appears on the left as soon as the visitor selects a category in the horizontal main menu. The value `$_current_$` as the first parameter ensures that exactly the direct subcategories of the most recently selected category are used.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ProductMenuIndex($_current_$,sidebar_submenu,1,show,no,0)~
```

![Submenu Current](https://mintcdn.com/websaleag-44ee7ea6/GhYeuPYs7oEmFYIy/images/submenu_current.jpg?fit=max\&auto=format\&n=GhYeuPYs7oEmFYIy\&q=85\&s=74c37f0e1a12560d4239ed9466f73786)

| No. | Value in the example | Meaning |
| - | - | - |
| 1 | `$_current_$` | Only the direct subcategories of the most recently selected category are used. |
| 2 | `sidebar_submenu` | Descriptive name of the menu, here a sidebar-positioned submenu. |
| 3 | `1` | Only one menu level is displayed directly, namely the first submenu level. |
| 4 | `show` | The next level below the current menu level is additionally displayed as soon as it is opened. This applies to all levels up to the one defined in parameter 3. |
| 5 | `no` | No `onMouseOver` and `onMouseOut` events are generated. |
| 6 | `0` | Categories outside the selected subtree receive no class assignment. |

Reference: WS-ProductMenuIndex()&#x20;

Guide: Freely positioned product menu&#x20;


## Related topics

- [Number of products per page](https://dokumentation.websale.de/en/v8s/kategorien/anzahl-der-produkte-pro-seite.md)
- [Freely positioned product menu](https://dokumentation.websale.de/en/v8s/navigation/frei-positioniertes-produktmenue.md)
- [Navigation](https://dokumentation.websale.de/en/v8s/navigation.md)
- [Styles for catalog and products](https://dokumentation.websale.de/en/v8s/referenz/styles/katalog-und-produkte.md)
- [Sorting product lists](https://dokumentation.websale.de/en/v8s/funktionen-fuer-produktlisten/produktlisten-sortieren.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.