Pokud lidem chcete (potřebujete) ukázat, kde na webu jsou a vlastně jak se dostanou zpátky, určitě k tomu využijte drobečkovou navigaci (ang. breadcrumbs).
Drobečková navigace vlastně slouží pro navigování v rámci víceúrovňové struktury. Pomůže lidem chápat, kde na webu jsou (v rámci struktury), ale také jim poskytne snadnou cestu o úroveň (nebo úrovně) výše.
Je to vlastně jako když šel Jeníček a Mařenka do lesa a házeli si na zem drobečky, aby se pak dokázali vrátit.
Jak vypadá
Drobečková navigace je typicky složena z několika odkazů, které představují položku ve struktuře stránky.
- Jak bylo řečeno, odkazy v drobečkové navigaci představují jednotlivé stránky struktury. První je nejvyšší, poslední je nejnižší.
- Poslední, tedy aktuální, stránka se typicky jako odkaz nedává.
Jak to má ale vlastně fungovat? Máte webovou stránku s určitou strukturou. Například:
- Stránka má úvodní stránku a dvě sekce – Katalog a O nás
- Každá sekce má své podstránky.
- Některé sekce mají ještě další podstránky.
Podívejme se na to, jak by vypadala drobečková navigace pro sekci Katalog a její podstránky.
Je potřeba mít také na paměti, že pro 0. úroveň (typicky homepage) se navigace nedává. Drobečková navigace se tak typicky hodí pro hlubší strukturu, kde by z ostatních navigačních prvků nebylo poznat, kde vlastně člověk je a jak se dostat zpět.
- Je to vlastně zbytečné, protože lidé se nemají kam prokliknout.
- Lidé často z dalších navigačních prvků poznají, že se nacházejí na úvodní stránce.
Příklady
Drobečková navigace na Amazon 
Drobečková navigace na Nestlé
Reference
- Navigation of Information v knize About Face 3
- Information Architecture for the World Wide Web
- Článek Breadcrumbs: 11 Design Guidelines for Desktop and Mobile od Normal Nielsen Group
- Článek Breadcrumbs In Web Design: Examples And Best Practices od Smashing Magazine
