Domů / Drobečková Navigace / Anatomie Kvalitní Drobečkové Navigace

Design Patterns

Anatomie Kvalitní Drobečkové Navigace

Pochopte základní prvky: text, oddělováče, aktivní stavy. Jak správně strukturovat breadcrumby tak, aby byly užitečné, ne matoucí.

Březen 2026 7 min čtení Začátečník

Počítač s otevřeným webem zobrazujícím navigační strukturu a cesty uživatele

Proč se Breadcrumby Vůbec Řeší?

Drobečková navigace je prostě důležitá. Člověk přijde na stránku, a vlastně neví, kde je. Je to první kategorie? Třetí potkategorie? Bez breadcrumbů se v hlubokých strukturách těžko orientuje.

Ale tady je ten problém — spoustu webů to dělá špatně. Breadcrumby jsou tam, ale vypadají matoucě. Nebo se na mobilu vůbec nezobrazují. Nebo nejsou přístupné klávesnici. Není to věda, ale není to ani triviální.

                  Co se naučíte
                
                    Základní struktura HTML pro breadcrumby
                  
                    Správné oddělováče a jejich styling
                  
                    Aktivní stavy a zaměření
                  
                    Responzivní chování na malých obrazovkách
                  
                    Přístupnost a ARIA atributy

HTML Struktura — Začít od Základů

Breadcrumb není nic složitého. Jsou to prostě odkazy oddělené nějakým znakem. Obvykle se používá <nav> prvek, protože navigace je to, co je.

Nejjednodušší struktura vypadá takto: máte seznam položek. Každá položka je odkaz, kromě poslední, která je jen text (aktivní stav). Mezi nimi jsou oddělováče — lomítko, šipka, nebo cokoli, co se vám líbí.

Důležité je, aby se to správně četlo screenreaderem. Víte, co to znamená? Když si člověk s hendikepem poslechne vaši stránku přes software, měl by pochopit, že to je navigace a že tam jsou kategorie.

HTML kód s nav elementem a strukturou breadcrumbů s odkazy a separátory

Různé typy oddělováčů pro breadcrumby — lomítko, šipka, tečka, spojovník

Oddělováče — Menší Věci, Velký Dopad

Oddělováč je to, co odděluje jednu položku od druhé. Nejčastěji se vidí lomítko — / . Je to jednoduché, všichni to znají.

Ale nemusí to být jen lomítko. Někdo používá šipku — › . Nebo tečku — . Zkušenost říká: zůstante u jednoho typu. Neměňte separátor během cesty. To jen zmátne lidi.

CSS má na oddělováče oblíbený trik — ::before nebo ::after . Místo aby jste psali oddělováč do HTML, přidáte ho přes CSS. Tím se vám HTML čistí a separátor si můžete později změnit bez změny struktury.

Aktivní Stavy a Zaměření

Poslední položka v breadcrumbu — ta, kde uživatel je — by neměla být odkaz. Je to jen text. Zvýrazníte to? Ano, měli byste. Barva, hmotnost písma, něco. Aby bylo vidět, že tam jsme.

Odkazy před tím jsou klikatelné. Když na ně najedete, měly by se změnit — barva, podtržení, cokoli. Nejdůležitější je, aby byly jasně klikatelné a aby bylo vidět, kam vás odvedou.

Klíčový bod: Poslední prvek nikdy není odkaz. Je to jen text. Barva by měla být trochu matná — méně důležitá. Starší prvky jsou důležitější, protože na ně můžete kliknout.

Pro lidi, co navigují klávesnicí, je důležité, aby se všechny odkazy daly dosáhnout přes Tab. A když na nich jsou, mělo by být vidět, kde jsou — focus stav. Nejlépe obdélník kolem odkazu nebo nějaká jiná barva.

Interaktivní stavy breadcrumbů — normální, hover, focus, a aktivní stavy

Smartphone zobrazující zkrácené breadcrumby s elipsou místo dlouhých cest

Na Mobilu — Zkrácení a Schovávání

Na malém telefonu se breadcrumby nemusí vejít. Dlouhá cesta jako “Domů / Kategorie / Potkategorie / Ještě Hlubší / Článek” zabere na mobilu skoro celý řádek. Nebo se zalomí do více řádků. Není to hezké.

Řešení? Schovejte starší položky za elipsu — … . Na mobilu uvidíte jen “… / Potkategorie / Článek”. Když si na elipsu klikne, rozbalí se. Nebo jednoduše, na mobilu budou vidět jen poslední tři položky.

Druhá varianta: breadcrumby na mobilu vůbec schovejte. Člověk přijde na stránku, snaží se číst článek. Navigační cesta mu tam není potřeba. Ale měl by k ní mít přístup — například v menu nebo gombě nahoře.

Shrnutí — Co Pamatovat

Struktura

Používejte <nav> , správné ARIA atributy, a poslední položka je jen text, ne odkaz.

Oddělováče

Vyberte si jeden typ a zůstante u něj. CSS ::before je praktická volba.

Stavy

Jasné barvy, viditelný hover, focus pro klávesnici, a poslední prvek méně důležitý.

Mobilní Příprava

Zkrácení přes elipsu, schovávání starších prvků, nebo úplné skrytí na malých obrazovkách.

Breadcrumby nejsou sexy prvek designu. Ale jsou potřebné. Když se dělají správně, lidi se v hierarchii stránky orientují lépe. A to je to, co počítá.

Petr Kubáň

Senior Expert na Navigační Struktury

Senior expert na navigační struktury s 14 lety zkušeností v UX designu a architektuře webového obsahu.

Související Články

Smartphone v ruce zobrazující mobilní web s navigací

Responzivní Zkrácení Breadcrumbů na Mobilech

Jak se drobečková navigace chová na malých obrazovkách? Skrývání prvků, používání ellipsis a praktické řešení.

Čtěte článek

Kombinace Breadcrumbů se Postranní Navigací

Jak sladit drobečkovou navigaci s postranním menu, aby se nekonkurovaly? Praktické příklady a rozhodovací logika.

Čtěte článek

Desktop monitor zobrazující HTML kód a web design

Stylování Oddělováčů a Aktivních Stavů

Jak pomocí CSS dosáhnout přitažlivého vzhledu breadcrumbů? Animace oddělováčů, efektní přechody a barvy.

Čtěte článek

Poznámka k Obsahu

Tento článek poskytuje informace o designu a struktuře drobečkové navigace pro vzdělávací účely. Specifické implementace se mohou lišit v závislosti na architektuře vašeho webu, cílové skupině a přístupnosti. Doporučujeme vždy testovat breadcrumby s reálnými uživateli a pomocí nástrojů pro přístupnost. Postupy se vyvíjejí a webové standardy se mění — sledujte oficiální dokumentaci W3C pro nejnovější doporučení.