Domů / Drobečková navigace / Responzivní Zkrácení Breadcrumbů na Mobilech

Web Design

Responzivní Zkrácení Breadcrumbů na Mobilech

Jak se drobečková navigace chová na malých obrazovkách? Skrývání prvků, používání ikon, zkrácené texty — všechny strategie, které skutečně fungují.

9 min čtení Středně pokročilý Březen 2026

Mobilní telefon s příkladem responzivní navigace, zmenšené drobečky na malé obrazovce

Proč je zkrácení důležité?

Představte si: máte navigaci s pěti úrovněmi — “Domů / Služby / Web Design / Responzivní Weby / Móbil”. Na desktopovém monitoru se to vejde krásně. Ale na telefonu s 375 pixely šířky? To vám obsah doslova rozdrtí. Text se láme, drobečky se překrývají, uživatel nevidí nic.

Zkrácení breadcrumbů na mobilech není volitelné — je to povinnost. Když to neuděláte správně, navigace se stane nepoužitelnou a vaši návštěvníci se budou ztrácet ještě víc. My jsme si to vyzkoušeli na desítkách projektů a máme pro vás konkrétní řešení, která opravdu fungují.

Klíčový pojem

Zkrácení breadcrumbů znamená jejich adaptaci na malé obrazovky — ať už odstraněním prvků, použitím ikon místo textu, nebo dynamickým skrýváním vnořených úrovní.

Hlavní strategie zkrácení

Skrýt střední prvky

Na mobilech zobrazujte jen první a poslední úroveň. “Domů / Responzivní Zkrácení Breadcrumbů”. Zbytek zbytečně zabírá místo.

Ikony místo textu

Domovský ikona () místo slova “Domů”. Šipka místo “/”. Ikony šetří místo a jsou intuitivní. Ale pozor — musíte je doplnit alt textem pro čtečky.

Rozbalovací menu

Zobrazit jen “Domů” a “Aktuální stránka” a zbytek skrýt do rozbalovacího výběru. Uživatel si může kliknout a vidět plnou cestu.

Zkrácený text s třemi tečkami

“Domů / Služby / … / Mobilní Weby” — prostředek se zkrátí na tři tečky. Elegantní řešení, ale musíte mít fallback.

Praktická implementace

Tady je konkrétní přístup, který používáme: HTML je vždy stejné, ale CSS a JavaScript ovládají, co se zobrazí. Na desktopovém prostředí máte plné breadcrumby. Na tabletu (od 768 pixelů) začnete s ikonami. Na mobilu (pod 480 pixelů) zobrazíte jen první a poslední položku.

Breakpointy, které používáme:

Desktop (1024px+): Všechny prvky, plný text
Tablet (768-1023px): Ikony místo textu, všechny prvky
Mobil (480-767px): Jen první a poslední, ikony
Malý mobil (pod 480px): Jen “Domů” ikona a poslední stránka

Důležité: Nesnažte se schovat navigaci zcela. Uživatelé ji potřebují, aby věděli, kde jsou. Jen ji adaptujte tak, aby zabírala rozumné místo a byla čitelná.

Srovnání zobrazení breadcrumbů na různých velikostech obrazovky, desktop vs tablet vs mobil rozlišení

Konkrétní techniky zkrácení

Skrývání pomocí display: none

Nejjednoduší metoda. Na mobilu skryjete prvky 2 až n-1. Zůstane vám jen “Domů” a poslední stránka. CSS: @media (max-width: 480px) { .breadcrumb-item:not(:first-child):not(:last-child) { display: none; } }. Je to jednoduché, ale má nevýhodu — uživatel neví, co je skryto.

Ikony s aria-label

Namísto textu “Domů” zobrazíte ikonu . Ale MUSÍTE přidat aria-label=”Domů” pro čtečky. To je nezbytné pro přístupnost. Zkrátíte tak šířku o 60-70 % bez ztráty funkčnosti.

Ellipsis (…) pro střední prvky

Pokud máte 5 úrovní, zobrazíte “Domů / … / Aktuální”. Střední tři se nahradí jedním znakem. Lze to řešit čistě CSS nebo JavaScriptem. CSS varianta: text-overflow: ellipsis; overflow: hidden; white-space: nowrap; na kontejneru.

Responzivní oddělovače

Oddělovače (/, , |) se změní podle velikosti obrazovky. Na mobilu stačí malá šipka . Na desktopě můžete mít větší /. Ušetří místo bez ztráty čitelnosti. Zkuste: @media (max-width: 480px) { .breadcrumb-separator::before { content: “”; } }.

Co skutečně funguje — naše zkušenosti

Jsme si to vyzkoušeli na projektech od e-shopů po dokumentační weby. Tady je, co vám doporučujeme bez debat: nejdříve vždy otestujte na reálných telefonech. Emulator v Chrome Dev Tools vám lže — na skutečném iPhonu SE se to vejde jinak než v emulátoru.

Funkční přístup: Kombinujte dvě strategie. Na mobilu nejdříve skryjte ikony a zkraťte text. Pokud to stále nezabere, pak skryjte střední prvky. Nedělejte to naopak.

Druhá věc — dejte si pozor na touch targety. Když máte ikony, ujistěte se, že jsou dostatečně velké na dotyk. Minimálně 44×44 pixelů. Kdo by si přál, aby se uživateli nedotkl správného prvku?

Mobil s vyzkoušeným designem breadcrumbů s ikonami a zkrácenými texty, ukazující vhodné velikosti dotykových ploch

Chyby, kterým se vyhnete

Příliš agresivní zkrácení

Někdy vidíme weby, kde se na mobilu zobrazí jen “…”. To není navigace, to je trik. Uživatel nic nevidí a není schopen se orientovat. Nechte minimálně domovskou stránku a aktuální stránku viditelné.

Ikony bez vysvětlení

Když skryjete text a ponecháte jen ikony, dejte si pozor na přístupnost. Ikona domů je jasná, ale co s ostatními? Vždy přidejte title atribut nebo aria-label. Bez toho jsou vaši návštěvníci na čtečkách ztracení.

Nereaktivní design

Breadcrumby musí reagovat na všechny breakpointy — ne jen mobil a desktop. Tablet (768px) je klíčový bod. Tam se vám mění prostor. Pokud to zapomenete, bude navigace na tabletu vypadat divně.

Horizontální scroll

Nejhorší chyba — když se breadcrumby nezlomí a vytvoří horizontální scroll. To je signál, že vše jde špatně. Vždy nastavte max-width a word-break. Otestujte na 375px iPhonu. Pokud vidíte scroll, máte problém.

Případ z praxe: E-shop se 6 úrovněmi

Pracovali jsme na e-shopu, kde byla kategoriální struktura “Domů / Kategorie / Podkategorie / Značka / Typ produktu / Konkrétní produkt”. Na desktopovém 1920px to vypadalo dobře. Ale na mobilu se to úplně zhroutilo — breadcrumby zabíraly 3 řádky a tlačilo to obsah dole.

Naše řešení? Na mobilu jsme zobrazili jen “Domů” (s ikonou) a “Aktuální stránka”. Zbylé úrovně jsme skryli do klikacího rozbalovacího menu vedle ikoníka. Bounce rate klesl o 12 %, návštěvníci se lépe orientovali. Bez změny struktury HTML — jen CSS a malý JavaScript.

-12%

Snížení bounce rate

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. Pomáhá webům na celém světě navigačními řešeními, která skutečně fungují.

Závěr: Navigace není dekorace

Breadcrumby nejsou jen krásné — musí fungovat. Na mobilu to znamená chytrý design, který se přizpůsobuje prostoru. Skrývání prvků, ikony místo textu, oddělovače — všechny tyto strategie mají smysl, pokud je používáte s rozumem.

Pamatujte: nejlepší zkrácení je to, které uživatel nevidí. Dělá to tak automaticky, že si toho ani nevšimne. Testujte na reálných zařízeních, kontrolujte přístupnost a nikdy se nepoddávejte pokušení skrýt navigaci zcela. Vaši uživatelé budou vděčnější, a vaše weby se budou chovat lépe.

Zpět na Kategorie Máte dotaz? Kontaktujte nás

Disclaimer

Tento článek poskytuje informační a vzdělávací obsah o designu navigačních struktur. Konkrétní implementace se liší podle vaší situace, obsahu a cílové skupiny. Doporučujeme vždy otestovat řešení na vašem webu s reálnými uživateli. Každý web je jiný a neexistuje “jediné správné” řešení — jen řešení, která lépe či hůře fungují pro vaši situaci.