Breadcrumbs

Co jsou breadcrumbs?

Breadcrumbs (česky drobečková navigace) je navigační prvek, který ukazuje uživateli cestu od úvodní stránky k jeho aktuální pozici na webu. Název pochází z pohádky o Perníkové chaloupce, kde Jeníček a Mařenka rozhazovali drobečky chleba, aby našli cestu zpět domů. Stejně jako v pohádce vám breadcrumbs pomáhají orientovat se na webu a snadno se vrátit o úroveň výše nebo na domovskou stránku.

Breadcrumbs obvykle vypadají takto: Domů › Kategorie › Podkategorie › Aktuální stránka. Každá úroveň je klikatelná (kromě poslední, kde se právě nacházíte), takže můžete rychle přejít na nadřazenou stránku bez nutnosti používat tlačítko Zpět v prohlížeči nebo hlavní menu. Tento navigační prvek je dnes standardem moderních webů, protože výrazně zlepšuje uživatelskou zkušenost a má pozitivní vliv na SEO.

Breadcrumbs najdete především na větších webech s hierarchickou strukturou – e-shopech, zpravodajských portálech, dokumentačních systémech nebo firemních webech s mnoha podstránkami. Na jednoduchém jednostránkovém webu breadcrumbs nedávají smysl, protože není kam navigovat. Ale jakmile má web více než dvě úrovně hierarchie, drobečková navigace se stává velmi užitečnou.

Proč jsou breadcrumbs důležité?

Breadcrumbs pomáhají uživatelům pochopit strukturu webu a jejich aktuální pozici. Představte si, že přijdete na detail produktu z vyhledávače. Bez breadcrumbs nevíte, v jaké kategorii se produkt nachází a jak se vrátit na přehled podobných položek. Drobečková navigace vám okamžitě ukáže cestu: Úvod › Elektronika › Notebooky › ThinkPad X1. Jeden klik a jste v kategorii všech notebooků.

Z pohledu UX (uživatelské zkušenosti) breadcrumbs snižují frustraci návštěvníků a počet opuštění webu. Uživatelé, kteří se na webu snadno orientují, na něm zůstávají déle a procházejí více stránek. To pozitivně ovlivňuje metriky jako bounce rate a průměrnou délku návštěvy.

Breadcrumbs navíc pomáhají SEO. Google je dokáže zobrazit přímo ve výsledcích vyhledávání namísto klasické URL adresy, což výsledek činí přehlednějším a zvyšuje pravděpodobnost kliknutí (CTR). Správně implementovaná drobečková navigace pomocí Schema.org BreadcrumbList dává Googlu jasný signál o struktuře webu a vztazích mezi stránkami.

Typy breadcrumbs

• Hierarchické breadcrumbs

Nejběžnější typ, který zobrazuje strukturu webu od nejvyšší úrovně (domovská stránka) k aktuální pozici. Příklad: Domů › Služby › Webdesign › Responzivní design. Hodí se pro většinu webů s logickou hierarchií kategorií a podkategorií.

• Atributové breadcrumbs

Používají se hlavně na e-shopech, kde produkty mají různé atributy (barva, velikost, značka). Místo kategorie zobrazují filtrační cestu: Produkty › Muži › Tenisky › Nike › Černé. Pomáhají uživateli pochopit, jaké filtry má aktivní a snadno je odebrat.

• Historie (Path-based breadcrumbs)

Ukazují historii prohlížených stránek na webu, podobně jako tlačítko Zpět v prohlížeči. Tento typ je dnes méně oblíbený, protože uživatelé jsou zvyklí na hierarchickou navigaci. Historie závisí na jednotlivém uživateli a jeho konkrétní cestě, takže nepomáhá k pochopení struktury webu.

Jak správně implementovat breadcrumbs?

• Umístění a vzhled

Breadcrumbs umisťujte horizontálně v horní části stránky, ideálně nad nadpisem H1 nebo těsně pod hlavní navigací. Neměly by být příliš výrazné, aby nepřebíjely důležitější prvky, ale zároveň musí být dobře viditelné a čitelné. Používejte malé, jednoduché písmo s dostatečným kontrastem.

• Oddělení úrovní

Jednotlivé úrovně oddělujte konzistentním symbolem – nejčastěji lomítko (/), šipka (›), nebo chevron (>). Šipka je nejintuitivnější, protože jasně naznačuje směr hierarchie. Vyhněte se příliš velkým nebo barevným oddělujícím prvkům.

• Klikatelnost a odkaz

Všechny úrovně breadcrumbs kromě poslední (aktuální stránka) by měly být klikatelné odkazy. Aktuální stránka je buď text bez odkazu, nebo link, který uživatele nikam nepřesměruje. Rozlište vizuálně aktivní odkazy od aktuální pozice (např. podtržení nebo barva).

• Schema.org markup

Implementujte breadcrumbs pomocí JSON-LD strukturovaných dat typu BreadcrumbList. Tento markup umožňuje Googlu zobrazit breadcrumbs přímo ve výsledcích vyhledávání místo URL. Každá položka breadcrumbs má pozici, název a URL.

• Mobilní responzivita

Na mobilních zařízeních breadcrumbs mohou být problém kvůli omezenému místu. Můžete zkrátit názvy kategorií, zobrazit pouze poslední dvě úrovně, nebo breadcrumbs na mobilu úplně skrýt. Častou praktikou je zobrazit jen tlačítko „Zpět na [nadřazená kategorie]".

• Accessibilita (přístupnost)

Breadcrumbs obalte do <nav> tagu s atributem aria-label="Breadcrumb" nebo aria-label="drobečková navigace". To pomáhá uživatelům s čtečkami obrazovky pochopit účel navigace. Položky vložte do <ol> (uspořádaný seznam), protože breadcrumbs mají logické pořadí.

Kdy breadcrumbs nepoužívat?

Breadcrumbs nejsou univerzální řešení pro každý web. Na jednoduchých webech s plochým obsahem (méně než 3 úrovně hierarchie) breadcrumbs nemají smysl. Například portfolio web nebo jednostránkový web s několika sekcemi nepotřebuje drobečkovou navigaci, protože nemá kam navigovat.

Také pokud má web velmi komplexní nebo netradičně strukturovaný obsah (například wiki s propojenými články bez jasné hierarchie), breadcrumbs mohou být matoucí. Stejně tak na webech, kde je hlavní navigace dostatečně přehledná a uživatelé se snadno orientují, můžou být breadcrumbs zbytečné.

Vždy zvažte, zda breadcrumbs skutečně pomáhají uživatelům, nebo jde jen o vizuální prvek navíc. Pokud se rozhodnete je nepoužít, ujistěte se, že máte kvalitní hlavní navigaci a logicky strukturovaný obsah s dostatečnými interními odkazy. Cílem je vždy usnadnit orientaci návštěvníkům a pomoci jim najít, co hledají.

Související pojmy