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

# Main menu navigation

> Design the main menu navigation in WEBSALE templates with horizontal, vertical or side variants to expose the full product range to visitors.

## Main menu

Freely designable navigation through the product range, e.g.

* horizontal navigation
* alternatively or additionally: vertical (side) navigation
* drop-down menu: only when the main category is selected do the subcategories open
* mega drop-down menu: a large vertically or horizontally (flyout) expanding menu, usually with several groups of navigation options, possibly supported by icons
* sticky menu: the menu follows the scrolling shop customer
* burger menu: a menu icon in the form of 3 short horizontal lines in the corner of the screen of (mostly mobile) devices
* off canvas: side-sliding navigation for mobile views

***

## Loading categories

To display the categories in the menu, the categories from the `$wsCategories` module are loaded using a `foreach` loop. The subcategories can then also be read in the same way in nested loops.

### Usage examples

#### Category level 1

In this example, the level 1 categories are loaded and output as links.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
  <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
{{ /foreach }}
```

#### Subcategories

In this example, the subcategories are additionally loaded and output as links.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
	<a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
	{{ if $wsCategories.loadChildren($cCatLevel1.id) }}
		{{ foreach $cCatLevel2 in $wsCategories.loadChildren($cCatLevel1.id) }}
			<a href="{{= $wsViews.url('Category', {id: $cCatLevel2.id}) }}">{{= $cCatLevel2.name }}</a>
		{{ /foreach }}
	{{ /if }}
{{ /foreach }}
```

### Checking for the active category

You can check whether the currently displayed category matches the category in the menu. To do this, the category data is first loaded from the `$wsViews` module and the ID of the category is assigned to a variable. Through an IF condition, the link can be assigned a CSS class.

#### Usage example

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
  {{ var $view = $wsViews.current }}
  {{ var $currentCategory = $view.info.category.id }}
  <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}" class="{{if $currentCategory == $cCatLevel1.id }}active{{ /if }}">{{= $cCatLevel1.name }}</a>
{{ /foreach }}
```

***

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ul>
   {{ foreach $cCatLevel1 in $wsCategories.loadChildren(null) }}
      {{ if $wsCategories.loadChildren($cCatLevel1.id) }}
         <li data-pm-index="{{= $cCatLevel1.id }}">
            <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
            <ul>
               {{ foreach $cCatLevel2 in $wsCategories.loadChildren($cCatLevel1.id) }}
                  <li>
                     <a href="{{= $wsViews.url('Category', {id: $cCatLevel2.id}) }}">{{= $cCatLevel2.name }}</a>
                  </li>
               {{ /foreach }}
            </ul>
         </li>
         {{ else }}
         <li>
            <a href="{{= $wsViews.url('Category', {id: $cCatLevel1.id}) }}">{{= $cCatLevel1.name }}</a>
         </li>
      {{ /if }}
   {{ /foreach }}
</ul>
```


## Related topics

- [$wsNavigation - Breadcrumb](/en/frontend/referenz/module/wsnavigation.md)
- [Components & collections in Strapi](/en/strapi-cms/komponenten-sammlungen-in-strapi.md)
- [Scan & Order](/en/frontend/funktionsubersicht/scan-and-order.md)
- [Anmeldung & Benutzerverwaltung von strapi](/strapi-cms/anmeldung-benutzerverwaltung-von-strapi.md)
- [$wsCategories - Categories](/en/frontend/referenz/module/wscategories.md)