Menu i nawigacja

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.

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.