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

# Hauptmenü Navigation

> Hauptmenü-Navigation gestalten: frei designbare horizontale oder vertikale Navigation durch das Produktsortiment im Shop-Template umsetzen.

## Hauptmenü

Frei designbare Navigation durch das Produktsortiment, z. B.

* horizontale Navigation
* alternativ oder zusätzlich: Vertikale (seitliche) Navigation
* Drop-Down-Menü (Aufklapp-Menü): Erst wenn die Hauptkategorie gewählt ist, öffnen sich die Unterkategorien
* Mega-Drop-Down-Menü: großflächiges, vertikal oder horizontal (Flyout) aufklappendes Menü, meist mit mehreren Gruppen von Navigationsoptionen, ggf. unterstützt durch Icons
* Sticky-Menü: Menü folgt dem scrollenden Shop-Kunden
* Burger-Menü: Menü-Icon in Form von 3 horizontalen kurzen Linien in der Bildschirmecke von (meist mobilen) Endgeräten
* Off Canvas: seitliche einfahrende Navigation für mobile Darstellungen

***

## Kategorien Laden

Um die Kategorien im Menü darzustellen, werden die Kategorien aus dem Modul `$wsCategories` mithilfe einer `foreach` Schleife geladen. Die Unterkategorien können anschließend ebenfalls in verschachtelten Schleifen auf die gleiche Weise eingelesen werden.

### Anwendungsbeispiele

#### Kategorie Level 1

In diesem Beispiel werden die Level 1 Kategorien geladen und als Links ausgegeben.

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

#### Unterkategorien

In diesem Beispiel werden zusätzlich die Unterkategorien geladen und als Links ausgegeben.

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

### Auf aktive Kategorie Prüfen

Es kann überprüft werden, ob die aktuell angezeigte Kategorie der Kategorie im Menü entspricht. Dazu werden zunächst die Kategoriedaten aus dem `$wsViews` Modul geladen und die ID der Kategorie einer Variablen zugewiesen. Durch eine IF Bedingung kann der Verlinkung eine CSS Klasse vergeben werden.

#### Anwendungsbeispiel

```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](/frontend/referenz/module/wsnavigation.md)
- [Browsing - Navigation between products](/en/frontend/funktionsubersicht/blaettern-von-produkt-zu-produkt.md)
- [Blättern - Navigation zwischen Produkten](/frontend/funktionsubersicht/blaettern-von-produkt-zu-produkt.md)
- [Konfigurations-Deeplinks](/admin-interface/konfigurations-deeplinks.md)
- [Configuration deep links](/en/admin-interface/konfigurations-deeplinks.md)