Drobečková navigace: kde na webu jste a jak se vrátit

Jak vypadá a odkud má jméno

Název odkazuje na pohádku o Jeníčkovi a Mařence, kteří si cestu z lesa značili drobečky. Na webu má obvykle tuto podobu:

Úvod › Služby › Rekonstrukce koupelen › Koupelna na klíč

Každá položka kromě poslední je odkaz. Najdete ji i nad nadpisem této stránky. Pro lidi, kteří na web přišli z vyhledávání nebo ze sdíleného odkazu, je to často jediná rychlá nápověda, co ještě web nabízí.

Kdy ji web potřebuje

Drobečky nenahrazují hlavní menu, jen ho doplňují. Na mobilu, kde je menu schované pod ikonou, jsou ale často nejrychlejší cestou zpět – víc o skrytém menu v hesle Hamburger menu.

Hierarchie, ne historie

Drobečky mají ukazovat, kam stránka v struktuře webu patří, ne kudy jste se k ní proklikali – na to slouží tlačítko zpět v prohlížeči. Cesta podle historie se mění s každým návštěvníkem a mate. Pevná hierarchie znamená, že web musí mít promyšlenou strukturu sekcí. Pokud žádná není, drobečky to rychle odhalí.

Názvy položek pište krátce a stejně jako v menu. Do drobečků nepatří celé titulky stránek s názvem firmy a městem – stačí „Koupelny“, ne „Rekonstrukce koupelen Brno | Stavby Novák“. Na dlouhé popisky je místo v nadpisu stránky.

V e-shopu se vedle hierarchie někdy používají i drobečky podle zvolených filtrů (barva, velikost). Ty jsou spíš přehled aktivních filtrů než navigace a do strukturovaných dat nepatří.

Zobrazení na mobilu

• Zalamování místo přetékání. Dlouhá cesta se má zalomit na druhý řádek, ne vytéct z obrazovky.
• Zkrácení prostředku. U hlubokých webů stačí ukázat první a poslední dvě úrovně, nebo jen odkaz o úroveň výš ve tvaru „‹ Rekonstrukce koupelen“.
• Dost velké odkazy. Malé písmo je v pořádku, ale plocha pro klepnutí musí být dost velká a položky ne nalepené na sebe.
• Přístupnost. Obalte drobečky do nav s popiskem, položky dejte do seznamu ol a aktuální stránku označte aria-current="page", aby ji odečítač obrazovky ohlásil.

Jak drobečky zapadají do celkového návrhu ovládání webu, vysvětluje heslo UX a UI.

Strukturovaná data BreadcrumbList

Aby Google cestu spolehlivě pochopil, dá se popsat i ve strukturovaných datech typem BreadcrumbList. Údaje musí odpovídat tomu, co návštěvník na stránce vidí:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Služby",
      "item": "https://vasefirma.cz/sluzby/" },
    { "@type": "ListItem", "position": 2, "name": "Rekonstrukce koupelen",
      "item": "https://vasefirma.cz/sluzby/koupelny/" },
    { "@type": "ListItem", "position": 3, "name": "Koupelna na klíč" }
  ]
}
</script>

Google podle nich může ve výsledcích místo holé adresy ukázat čitelnou cestu. Jak se výsledky na počítači a na mobilu zobrazují, Google občas mění – v roce 2025 oznámil, že na mobilu ukazuje u výsledků jen doménu. Ověřte v aktuální dokumentaci Search Central. Odkazy v drobečcích zároveň posilují interní prolinkování nadřazených sekcí.

Časté chyby

• Úvod pojmenovaný jako „Home“ na českém webu nebo nadpisy kategorií, které se v drobečcích jmenují jinak než v menu.
• Položka bez stránky. Mezikrok „Služby“ v cestě, na který nejde kliknout, protože taková stránka neexistuje. Buď ji vytvořte, nebo ji z cesty vynechte.
• Data, která nesedí s viditelným textem. Šablona vypisuje jednu cestu a strukturovaná data jinou, typicky po změně kategorií.
• Drobečky až pod obsahem. Mají být nahoře, nad nadpisem, kde je návštěvník hledá ve chvíli, kdy přijde.

Jak to řešíme my

Drobečky nad nadpisem této stránky jsou zároveň popsané typem BreadcrumbList, takže viditelná cesta a data pro Google říkají totéž. Struktura sekcí a navigace je součástí návrhu webu na míru (35 000 Kč), u e-shopu (cena od 30 000 Kč) navíc záleží na možnostech zvolené platformy. Doplnění drobečků do stávajícího webu nejdřív posoudíme a naceníme předem.

Časté otázky

Mohlo by vás zajímat