Drobečková navigace je společně s hlavní nabídkou a případně i dalšími navigačními prvky (předchozí/další příspěvek, štítky, kategorie, mapa webu) důležitou součástí webu. Podstatná je vždy obsahová hodnota webu, neboť jsou to právě informace, které návštěvníci především očekávají a kvůli nimž na web přicházejí. Přesto, resp. právě proto musí mít návštěvníci k dispozici komfortní uživatelské rozhraní, které jim umožní snadný pohyb napříč jednotlivými stránkami a poskytne celkovou informaci o tom, v které časti webu se právě nacházejí.

Zatímco navigační prvky typu hlavní navigační nabídka a mapa webu slouží především k návodnému dopřednému zobrazení požadované stránky umístěné kdesi v celkové struktuře webu a navigační prvky typu kategorie a štítky včetně prvku související příspěvky ke zobrazení tematicky obdobných stránek v rámci webu, drobečková navigace plní funkci prakticky opačnou. Mimo toho, že návštěvníkovi usnadňuje lépe se orientovat, v které časti webu se nachází, umožňuje rovněž snadný zpětný přesun do vyšších úrovní webu, počínaje přímo nadřazenou stránkou a (obvykle) konče domovskou stránkou.

Grav CMS umožňuje použití drobečkové navigace po nainstalování doplňku Breadcrumbs. Pokud je tento doplněk naistalován a povolen, zobrazí se drobečková navigace na místě určeném šablonou stránky. Například v případě šablony webu Quark je to pouze na stránkách definovaných šablonami blog a item, nicméně nic nebrání tomu, umístit drobečkovou navigaci na kteroukoliv stránku jednoduchým vložením Twig kódu do příslušné šablony stránky.

Nespornou výhodou drobečkové navigace (obecně všech navigačních prvků) v Gravu je, že přesně koresponduje s reálnou strukturou webu, která má striktně hierarchickou podobu (danou stromovou strukturou složek), tedy za předpokladu, pokud nepoužíváme specifické metody k přepsání cest, ale to je spíše výjimkou. Nicméně i v případě, že přistoupíme z nějakého důvodu k přepsání cesty, obvykle pokud chceme odkázat na nějakou stránku z jiné časti webu, máme vše pod absolutní kontrolou. Například sekundární odkaz [Úvod > Profil společnosti > Vedení společnosti], který je dostupný pod URI https://www.example.com/profil/vedeni přepíšeme na primární [Úvod > Kontakty > Vedení společnosti], který je dostupný pod URI https://www.example.com/kontakty/vedeni, čímž i sekundární odkaz bude nadále dostupný pod tímto URI včetně názvů příslušných stránek, které jsou v něm obsaženy.

Alternativně lze injektovat (vložit z jiné stránky) obsah z primární do sekundární stránky, což umožní ponechání původního URI sekundární stránky (ve shora uvedeném případě https://www.example.com/profil/vedeni), ovšem za cenu duplicitního obsahu. Tato varianta by se tedy neměla používat, protože je jednak matoucí pro návštěvníky a jednak penalizována vyhledávači, ovšem pokud se pro ni přesto z nějakého důvodu rozhodnete (prakticky mě napadá pouze to, že chcete skutečně dodržet identický vztah reálné struktury webu a navigace), uveďte do sekundární stránky kanonickou cestu primární stránky.

V případě jiných CMS, které nevyžadují striktní vztah rodič <=> dítě, obvykle pak mají oddělenou strukturu od obsahu, čímž shodný příspěvek umístěný na URI https://www.example.com/page/123 může být jinak začleněn v hlavním menu [Úvod > Profil společnosti > Nabídka volných míst] a jinak v dalších menu [Úvod > HRM > Pracovní příležitosti > Nabídka volných míst] (částečně shodné s tím, co je popsáno výše ohledně přepisování cest v Gravu), resp. je z jejich strany URI stránky tvořena podle nějakého předem definovaného vzoru (https://www.example.com/yyyy/mm/dd/slug, https://www.example.com/post/slug), ačkoliv v důsledku se může brát v potaz pouze část /slug, nemusí drobečková navigace nutně korespondovat se začleněním stránky v rámci webu (obecně to platí pro všechny CMS postavené na relačních databázích).

V případě Gravu tedy skutečně stačí pouze nainstalovat a aktivovat doplněk Breadcrumbs a z hlediska tvorby struktury se nemusíme o víc starat. Navíc plně podporuje definici Schema.org/BreadcrumbList. V případě začlenění do vlastní šablony webu můžete pro formátování použít buď výchozí styly předdefinované v doplňku (aktivují se v rámci nastavení doplňku), nebo vlastní styly (výchozí styly doplňku musí být deaktivovány), popř. přepsání výchozích stylů (pokud jsou aktivovány), resp. požadovaných částí vlastními styly.

Poslední uvedený způsob je vhodné použít zejména v případě, pokud máme nainstalovanou některou z dostupných šablon webu, např. výchozí Quark, přičemž zde máme na výběr ještě možnost přepsat výchozí styl pro drobečkovou navigaci definovaný přímo ve stylech šablony webu. Uvedené platí samozřejmě za předpokladu, že v šabloně webu jsou styly pro drobečkovou navigaci řešeny, což nemusí být vždy pravidlem, a rovněž rovněž záleží i na posloupnosti stylů a jejich případné prioritizaci. V případě šablony webu Quark platí, že jsou styly drobečkové navigace zpracovávány ve výchozím nastavení následovně:

1. Styly doplňku Breadcrumbs (pokud jsou aktivovány v nastavení doplňku)
2. Styly frameworku Spectre (v případě drobečkové navigace nejsou aktuálně použity, resp. šablona Quark používá vlastní názvy identifikátorů a tříd)
3. Styly šablony Quark
4. Styly webu definované vlastníkem (pokud existují)

V příštím článku si ukážeme, jak upravit styly drobečkové navigace, aby formátování vyhovovalo našim potřebám a bylo použitelné i pro mobilní zobrazení.