1. Komponenty

Drobečková navigace

angl. Breadcrumb

Slouží k zobrazení polohy ve struktuře webu a umožňuje přechod na nadřazenou úroveň.

Varianta na světlém pozadí


<div class="col-12">
    <nav class="breadcrumbs" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Úvod</a></li>
            <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Seznam datových schránek</a></li>
            <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Orgány územní samosprávy</a></li>
            <li class="breadcrumb__item breadcrumb__item--active" aria-current="page"><span class="breadcrumb__link">Plzeňský kraj</span></li>
        </ol>
    </nav>
</div>

Varianta na tmavém pozadí


<div class="row mp-background--blue mb-2 pt-2 pb-2">
    <div class="col-12">
        <nav class="breadcrumbs" aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb--inverse">
                <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Úvod</a></li>
                <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Seznam datových schránek datových schránek datových schránek</a></li>
                <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Seznam datových schránek datových schránek datových schránek</a></li>
                <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Orgány územní samosprávy územní samosprávy územní samosprávy územní samosprávy</a></li>
                <li class="breadcrumb__item breadcrumb__item--active" aria-current="page"><span class="breadcrumb__link">Plzeňský kraj</span></li>
            </ol>
        </nav>
    </div>
</div>

Použití

  • Drobečková navigace nenahrazuje primární navigaci
  • Jako první položku uvádějte vždy úvodní stránku
  • Drobečkovou navigaci umisťujte v blízkosti Hlavičky
  • Ukazujte hierarchii stránek, nikoliv historii prohlížení
  • Nadřazené úrovně jsou podtržené, aby bylo jasné, že jsou klikatelné
  • Aktuální poloha ve struktuře není podtržená, není klikatelná
  • Udržujte názvy položek krátké a popisné
  • Nepoužívejte drobečkovou navigaci jako Formulářové kroky nebo jiný indikátor postupu

Užitečné odkazy