# Menu i nawigacja

## Źródło pozycji menu

Pozycje tworzysz w panelu witryny, w sekcji Nawigacja. Przypisz menu do lokalizacji `header` lub `footer`, ustaw etykiety i adresy, zapisz kolejność. Paczka nie powinna zawierać identyfikatorów menu klienta. Te same lokalizacje działają w szablonach Loom i we wspólnym nagłówku aplikacji.

## Gotowy element Loom

```html
<gs-menu location="header" label="Nawigacja główna" class="theme-menu"></gs-menu>
<gs-menu location="footer" label="Przydatne linki"></gs-menu>
```

Element tworzy `nav`, listę `ul` oraz linki. `label` jest nazwą nawigacji dla czytnika ekranu. Nie wstawiaj go do innego `nav`. Nie tworzy nowych stron ani pozycji w panelu. W podglądzie kliknięcia nie opuszczają kreatora. Publiczny renderer uwzględnia prefiks witryny oraz domenę własną. Puste przypisane menu pozostaje puste; przy braku przypisania publiczny renderer może użyć listy stron.

Wspólny nagłówek strony nadal wyświetla główne menu. Użyj elementu jako dodatkowej nawigacji, np. w sekcji lub stopce; samo dodanie `gs-menu` nie wyłącza wspólnego nagłówka. Unikaj dwóch identycznych menu obok siebie.

## Własny HTML i styl

```html
<ul class="secondary-links">
<template gs-repeat="item in menus.footer">
  <li><a href="[[ safe_url(item.href) ]]" gs-text="item.label"></a></li>
</template>
</ul>
```

`menus.header` i `menus.footer` zawierają `label` i `href`. Tekst jest automatycznie escapowany. Nie dodawaj domeny przed `href`: adres jest już przygotowany przez renderer. W snippetach kontekst `menus` jest dostępny bez dodatkowego przekazywania.

```css
.theme-menu ul { display:flex; flex-wrap:wrap; gap:1rem; padding:0; list-style:none; }
.theme-menu a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
```

## Testy przed publikacją

Sprawdź menu puste, długie etykiety, telefon, klawiaturę i zmianę kolejności. Przetestuj link wewnętrzny, `mailto:`, `tel:` i HTTPS. Nie zapisuj adresów `javascript:`. Dodaj link do archiwum bloga w Nawigacji po utworzeniu strony blogowej; sam plugin nie zastępuje decyzji o menu. Sprawdź też domenę własną i podgląd z prefiksem witryny.

## Dropdown, zagnieżdżenia i megamenu

Wspólne menu GS Loom obsługuje maksymalnie **5 poziomów**, 30 pozycji w jednej gałęzi i 100 pozycji łącznie w jednym menu. `children` zawiera kolejne pozycje w tym samym formacie. `menu_layout: "mega"` układa bezpośrednie dzieci w kolumnach; `dropdown` tworzy listę. Każda pozycja może mieć ikonę biblioteczną lub `image:<URL>` (wybór/upload przez menedżer plików).

W kreatorze otwórz **Nawigacja**, rozwiń pozycję i użyj **Dodaj podpozycję**. Każdy poziom ma etykietę, link, ikonę i układ podmenu. Po edycji menu witryny włączana jest opcja `use_site_menu` w ustawieniach GS Loom. Paylio korzysta ze wspólnego nagłówka; Skeleton i Victorie zachowują oryginalną nawigację do momentu włączenia tej opcji. Dzięki temu dotychczasowe menu demonstracyjne nie znika przy aktualizacji.

```html
<gs-menu location="header" label="Menu"></gs-menu>
```

```json
{
  "label": "Explore",
  "href": "#",
  "menu_layout": "mega",
  "icon": "star",
  "children": [{
    "id": "services",
    "label": "Services",
    "href": "/services",
    "icon": "globe",
    "children": [{ "id": "design", "label": "Design", "href": "/design" }]
  }]
}
```

Podmenu otwierasz kliknięciem lub klawiaturą (Enter/Spacja); Escape zamyka poziom i przywraca fokus. Gdy rodzic ma własny adres, link do niego jest pierwszą pozycją panelu — otwarcie podmenu nie powoduje nawigacji. Na telefonie podpozycje rozwijają się w pionie. Styl szablonu definiuje `--gs-menu-background`, `--gs-menu-color`, `--gs-menu-border`, `--gs-menu-radius`, `--gs-menu-gap`; domyślnie dziedziczone są tokeny GS Loom/nagłówka. Sprawdź długie tłumaczenia, dotyk, klawiaturę i widoki desktop/tablet/mobile. Ikony, adresy i układ pozostają niezależne od języka.

Działający przykład dropdownu i megamenu: [komponenty GS Loom](../components/#live-component-examples).