Před časem jsem zveřejnil na webu Grav.cz články o drobečkové navigaci, konkrétně pak o doplňku Breadcrumbs a případné úpravě jeho formátování, aby lépe vyhovovala uživatelským potřebám. V tomto článku se zaměřím na hlavní navigační nabídku nebo chcete-li dynamické rozbalovací menu, jež společně s drobečkovou navigací a mapou webu tvoří nejdůležitější prvky pro základní orientaci uživatele na webu. Pro zajímavost – tento článek je první, který vzniká nikoliv z mé vlastní iniciativy, ale de facto na podnět jiného uživatele, který se na mě obrátil v souvislosti s problematikou hierarchického rozbalovacího menu.

V úvodu je nezbytné upozornit na skutečnost, že ve většině šablon webu nabízených na oficiálních stránkách CMS Grav je hlavní navigační nabídka v různých formách a kvalitě integrována. Za zmínku stojí zejména aktuálně používaná výchozí šablona webu Quark, dříve pak Antimatter, nicméně tento výčet není konečný, další lze nalézt v šablonách webu primárně určených pro blogovací systémy. Pokud šablona webu hlavní navigační nabídku neobsahuje, resp. tato není rozbalovací (někdy autor šablony webu řeší pouze zobrazování stránek z nejvyšší úrovně webu), popř. používáme vlastní šablonu webu, pak nám nezbývá, než si rozbalovací hlavní nabídku vytvořit a zakomponovat.

Osobně zastávám názor, že znovu vymýšlet kolo je ztráta času a proto v dalších odstavcích budu prezentovat Twig kódy, které používá ke generování menu šablona webu Quark. Je nezbytné uvést, že menu primárně koresponduje se strukturou webu přesně tak, jak je dána hierarchickým uspořádáním stránek. Sekundárně pak lze do menu „podsunout“ i jiné odkazy (externí, popř. na jiné stránky), ale to je záležitost přepisování cest. Ohledně uvedeného doporučuji přečíst si zmíněný článek o drobečkové navigaci, kde je uvedené blíže popsáno. Samostatnou kapitolou je pak domovská stránka, která má specifický význam a záleží na tom, zda je vyčleněna na úroveň ostatních stránek (což zpravidla bývá, pak je pouze na zváženou její umístění v menu a případné zvýraznění, popř. úplné vynechání z menu a umístění odkazu do loga), nebo je nadřazená všem ostatním (spíše výjimky, ale občas jsem na uvedené někde narazil).

Hlavní navigační nabídka je generována velmi jednoduchým Twig kódem (/user/themes/quark/templates/macros/macros.html.twig):

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
    <li>
      <a href="{{ p.url }}" class="{{ active_page }}">
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

Tento kód, v tomto případě se pak správně jedná macro, dělá pouze to, že rekurzivně prochází všechny viditelné stránky příslušného webu a generuje strukturu do obyčejného netříděného (nečíslovaného) seznamu. Pro úplnost uvádím, že z hlediska Gravu jsou viditelné všechny stránky, které mají číselný prefix, např. /01.home, popř. pak i ty, které mají explicitně nastavenou proměnnou stránky visible na hodnotu true. V opačném případě jsou stránky neviditelné, tj. pro potřeby tvorby menu jsou ignorovány (které stránky mají být obsaženy v menu si samozřejmě můžeme příslušnou úpravou makra nadefinovat). V případě, že se jedná o aktivní stránku (potažmo o jakoukoliv dědičnou aktivní stránku), je menu dále odlišeno dle použitých stylů.

Uvedené makro je pak voláno prostřednictvím Twig kódu umístěného v souboru /user/themes/quark/templates/partials/navigation.html.twig:

{% import 'macros/macros.html.twig' as macros %}
<ul {{ tree ? 'class="tree"' : '' }}>
  {{ macros.nav_loop(pages) }}
</ul>

A úplně nakonec, aby vše fungovalo, přesně jak má, je uvedený kód vložen na požadované místo v šabloně stránky (typicky /user/themes/quark/templates/partials/base.html.twig, ale není to podmínkou, záleží na našich potřebách):

...
<nav class="dropmenu animated">
  {% block header_navigation %}
    {% include 'partials/navigation.html.twig' %}
  {% endblock %}
</nav>
...

To je vše. Pak už zbývá pouze doplnit příslušné styly, které se postarají o:

1. vizuální formátování nabídky, např. zvýraznění aktivních položek menu (viz výše), návěstí upozorňující na to, že stránka obsahuje podstránky, např. symbol >, správné umístění podmenu po jeho zobrazení apod.,
2. dynamickou funkcionalitu menu, tj. samotné rozbalování.

V případě formátování nabídky lze vycházet ze stylů použité šablony webu (potažmo použitého frameworku), které je ovšem obvykle třeba příslušně modifikovat, aby splnily očekávání v jiné šabloně webu, zejména pak grafickou jednotnost a kompatibilitu.

Rozbalování menu, resp. jeho dynamičnost lze docílit pouhým použitím kaskádových stylů, nicméně nic nebrání tomu, použít i skriptovací jazyk, např. JavaScript. Na webu jsou desítky příkladů, které se uvedenému věnují, ovšem různých kvalit, je tedy třeba nalézt ten, který bude nejvíce vyhovovat vašim potřebám.

Za zmínku stojí, že shora použité Twig kódy lze použít nejen k tvorbě menu, ale rovněž ke generování libovolné struktury založené na hierarchii stránek. Po drobné modifikaci lze kód použít třeba pro vytvoření mapy webu (viz https://www.tiskarnalt.cz/mapa-webu), nebo boční navigační nabídky odkazující na podstránky aktivní stránky (viz https://www.tiskarnalt.cz/profil).

V závěru ještě jedna zajímavost, která se týká hlavní navigační nabídky v Gravu, resp. jejího použití v šabloně webu Quark. Zde je zakomponována možnost, kromě praktického významu i ilustrující maximální flexibilitu tohoto CMS, vypnout na modulární stránce (např. domovské stránce webu, ideálně pak v případě One Page Site) hlavní navigační nabídku webu, přesněji řečeno ji přepsat navigační nabídkou stránky, kdy odkazy menu směrují na jednotlivé moduly, z nichž je stránka složena. Uvedeného chování lze docílit nastavením proměnné stránky show_onpage_menu na hodnotu true.