Drobečková navigace

• Proweby.cz
• 28. 6. 2024
• Slovník webových, online marketingových a IT pojmů, D.

Co je drobečková navigace

Drobečková navigace (anglicky breadcrumb navigation) je druh navigačního prvku na webových stránkách, který zobrazuje uživatelům cestu nebo strukturu stránek od domovské stránky až po aktuální stránku, kterou si prohlížejí. Tento prvek se obvykle nachází na vrcholu stránky a pomáhá uživatelům snadno se orientovat a navigovat zpět na předchozí úrovně webu.

Význam a výhody drobečkové navigace

Zlepšení uživatelské zkušenosti

Drobečková navigace poskytuje uživatelům jasný přehled o jejich aktuální poloze na webu a umožňuje jim snadno se vracet na předchozí stránky, což zlepšuje celkovou uživatelskou zkušenost.

Snadná navigace

Pomocí drobečkové navigace mohou uživatelé rychle přeskočit na vyšší úrovně struktury webu, aniž by museli používat tlačítko zpět nebo hlavní menu. To je zvláště užitečné na rozsáhlých webových stránkách s hlubokou hierarchií.

SEO přínosy

Drobečková navigace může také pozitivně ovlivnit SEO (Search Engine Optimization) tím, že poskytuje vyhledávačům jasnou strukturu stránek a usnadňuje jim indexaci obsahu. Vyhledávače mohou drobečkovou navigaci použít k lepšímu porozumění hierarchii a kontextu jednotlivých stránek.

Typy drobečkové navigace

Hierarchická (umístění)

Hierarchická drobečková navigace zobrazuje uživatelům cestu od domovské stránky až po aktuální stránku na základě struktury webu. Například:

Domů > Kategorie > Podkategorie > Produkt

Atributová (vlastnosti)

Atributová drobečková navigace se používá zejména v e-commerce, kde zobrazuje vlastnosti nebo filtry použité k dosažení aktuální stránky. Například:

Domů > Oblečení > Dámské > Šaty > Červené

Historická

Historická drobečková navigace zobrazuje uživatelům sekvenci stránek, které navštívili, podobně jako tlačítko zpět v prohlížeči. Tento typ drobečkové navigace je méně běžný.

Implementace drobečkové navigace

HTML a CSS

Drobečkovou navigaci lze snadno implementovat pomocí HTML a CSS. Zde je jednoduchý příklad:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Domů</a></li>
    <li class="breadcrumb-item"><a href="/kategorie">Kategorie</a></li>
    <li class="breadcrumb-item active" aria-current="page">Produkt</li>
  </ol>
</nav>

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}

JavaScript knihovny a frameworky

Pro dynamické generování drobečkové navigace na základě aktuální URL lze využít JavaScript knihovny a frameworky. Nástroje jako React, Angular nebo Vue.js mohou být použity k vytvoření pokročilých drobečkových navigací.

Příklady použití drobečkové navigace

E-commerce weby

Na e-commerce webech pomáhá drobečková navigace uživatelům snadno se vracet k širším kategoriím produktů a objevovat další nabídky.

Blogy a zpravodajské weby

Na blozích a zpravodajských webech umožňuje drobečková navigace čtenářům snadno přecházet mezi kategoriemi článků a objevovat další obsah.

Firemní weby

Na firemních webech pomáhá drobečková navigace návštěvníkům orientovat se v hierarchii stránek a rychle najít informace o službách, produktech nebo kontaktech.

Shrnutí

Drobečková navigace je užitečný navigační prvek, který zlepšuje uživatelskou zkušenost, usnadňuje navigaci a může pozitivně ovlivnit SEO. Implementace drobečkové navigace je jednoduchá a může být přizpůsobena různým typům webů a jejich specifickým potřebám.