Webdesign & UX

Kombinace Breadcrumbů se Postranní Navigací

Jak sladit drobečkovou navigaci s postranním menu, aby se nekonkurovaly? Praktické příklady ze skutečných webů s hlubokými hierarchiemi.

10 min Středně pokročilý Březen 2026

Tiskopis ukazující strukturu webu s hierarchií kategorií a navigačními prvky v barvě

Běžná chyba v designu navigace? Postavit breadcrumby a postranní menu vedle sebe bez jasné komunikace mezi nimi. Uživatel pak neví, co dělá co — je to redundantní nebo slouží jiným účelům? To vytváří zmatek.

Věc je v tom, že oba prvky můžou pracovat spolu fantasticky, pokud je správně postavíte. Breadcrumby ukazují, kde jste v hierarchii. Postranní navigace vám dá přístup ke všem sekcím na dané úrovni. Nejde o konkurenci — je to partnerství.

Skici dvou navigačních prvků vedle sebe, jedna nad druhou, se šipkami znázorňujícími jejich interakci

Kdy si konkurují (a jak se tomu vyhnout)

Máte web s 4–5 úrovněmi obsahu. Návštěvník se prochází Produkty Elektronika Telefony iPhone iPhone 15 Pro. Teď vidí breadcrumby Domů / Produkty / Elektronika / Telefony / iPhone . Vedle toho má postranní menu, kde je seznam všech produktů a kategorií.

Problém: Oba prvky říkají skoro totéž. Uživatel se ptá: „Proč mám obě navigace?” To zbytečně zatěžuje design a plýtvá místem.

Řešení je jasné — dělte si práci. Breadcrumby nejsou navigace. Jsou orientačním prvkem. Ukazují cestu. Postranní menu je opravdu navigace — místo, kde se rozhodujete, kam dál.

Snímek obrazovky webové stránky s hlubokými kategoriemi, kde je vidět redundantní navigace vytvářející zmatek

Detailní pohled na postranní panel s menu položkami vedle breadcrumbu v horní části

Praktické rozdělení rolí

Nejlepší web, který jsem viděl? Používá breadcrumby na jednoho řádku, málo viditelné, bez ikon — prostě orientační. Postranní menu pak má hvězdičky pro oblíbené, indikátory „nové”, a přehledné seskupení.

Breadcrumby se starají o pasivní orientaci . Postranní menu se stará o aktivní exploraci . Když vám toto jasně sedí, vše funguje hladce.

Tip pro design:

Breadcrumby dejte malé, šedivé, v horní části. Postranní menu nechte trochu větší, s barvou, s ikonami. Tímto způsobem si každý prvek střeží svůj prostor a nehádají se.

Responzivita: Když se prostor zmenší

Na mobilech není místo na nic. Postranní menu se schová za hamburger. Breadcrumby se zkrátí — zobrazíte jen „… / Telefony / iPhone 15 Pro”. To je správně.

Problém? Někteří designéři se zbavují breadcrumbů úplně. Pak návštěvník neví, kde je. Chybí mu kontext. Lepší přístup? Nechte breadcrumby, ale zkraťte je. Prvních pár úrovní vynechte, nechte poslední 2–3. Uživatel tak vidí, kde je, bez zbytečného desktopového designu.

Desktop: Úplné breadcrumby Domů / Kat1 / Kat2 / Kat3 / Aktuální
Tablet: Zkráceno Kat2 / Kat3 / Aktuální
Mobil: Jen poslední dva Kat3 / Aktuální

Srovnání responsivního chování breadcrumbů na různých velikostech obrazovky od desktopu po mobil

Příklad reálného webu s dobře vyřešenou kombinací breadcrumbů a postranního menu

Příklady ze skutečných webů

Amazon to dělá dobře. Breadcrumby jsou minimální — jen odkaz na aktuální kategorii. Postranní filtr pak vám dá všechny možnosti. Není tam zbytečný overlap.

Dokumentace Django zase kombinuje breadcrumby s obsahem v postranním panelu. Víte, kde jste v hierarchii dokumentace. A vedle vám nabízí související články. To je partnerství v praxi.

Klíč k úspěchu:

Neduplikujte informace. Breadcrumby jsou cesta, postranní menu je mapa. Jedna říká „tady jste”, druhá říká „tady se můžete jít podívat”.

Závěr: Design, ne konkurence

Kombinace breadcrumbů a postranní navigace není chyba. Je to chytrá strategie, pokud ji správně postavíte. Breadcrumby ukazují cestu. Postranní menu nabízí volby. Jeden prvek je pasivní orientace, druhý je aktivní explorační nástroj.

Pamatujte: neměřte úspěch počtem navigačních prvků. Měřte ho tím, jestli návštěvník ví, kde je a kam se má jít. Pokud vám to oba prvky dohromady řeší bez zmatku, udělali jste správnou práci.

Na mobilech zkraťte breadcrumby, schujte menu za hamburger. Na desktopu dejte oba prvky do hry. To je přesně ten přístup, který funguje nejlépe.

Poznámka

Tento článek je informativního charakteru a slouží k vzdělávacím účelům. Konkrétní implementace bude vždy záviset na struktuře vašeho webu, cílové skupině a specifických požadavcích projektu. Doporučujeme vždy testovat navigaci s reálnými uživateli.