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>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

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 Menu
  • 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