Omrvinková navigácia (Breadcrumbs)
Komponent omrvinková navigácia pomáha používateľom pochopiť, kde sa nachádzajú v štruktúre webového sídla a prechádzať medzi jednotlivými úrovňami.
Použitie omrvinkovej navigácie
Omrvinková navigácia sa používa ako zrozumiteľná navigácia používateľa v štruktúre stránok smerom od domovskej stránky. Komponent slúži na pochopenie aktuálnej polohy používateľa a na návrat na vyššie úrovne webového sídla.
Medzi odkazmi a aktuálnou stránkou musí byť jasné vizuálne odlíšenie. Aktuálna stránka nemá byť klikateľná. Text odkazov má byť stručný, zrozumiteľný a ideálne v rozsahu jedného až troch slov.
Ako sa používa
- Umiestňuje sa pod hlavičkou stránky tak, aby bola používateľovi dostupná pri orientácii v rozhraní.
- Zvyčajne sa skladá z horizontálneho reťazca odkazov od vyššej úrovne po aktuálnu stránku.
- Používajte ju najmä pri viacúrovňovej informačnej architektúre.
- Názvy položiek majú byť krátke, vecné a konzistentné s názvami stránok.
Ako sa nepoužíva
- Nepoužívajte ju na weboch s plochou štruktúrou, kde neprináša používateľovi dodatočný kontext.
- Nepoužívajte ju ako indikátor postupu v lineárnom formulári alebo transakcii.
- Vyhnite sa príliš dlhým názvom položiek.
- Nepoužívajte ikonky ako náhradu za zrozumiteľný text odkazu.
Varianty a stavy
1. Základný stav
Základný stav zobrazuje odkaz na vyššiu úroveň a aktuálnu stránku. Aktuálna stránka nie je klikateľná a má byť označená ako aktuálna.
2. Základný stav s ikonkou
Základný stav s ikonkou namiesto Domov.
3. Viacúrovňová omrvinková navigácia
Pri viacúrovňovej štruktúre zobrazte jednotlivé úrovne od všeobecnejšej po konkrétnejšiu stránku. Nepoužívajte príliš dlhé názvy položiek.
4. Dlhšia navigácia
Pri dlhších omrvinkách musí komponent zvládnuť zalomenie na viac riadkov bez straty čitateľnosti a bez prekrytia položiek.
5. Mobilné zobrazenie
Pri malých šírkach obrazovky môže komponent zobraziť zjednodušenú navigáciu alebo zalomený zoznam. Dôležité je, aby používateľ nestratil kontext a mal dostupnú cestu na vyššiu úroveň.
Prístupnosť (Accessibility)
Omrvinková navigácia musí byť implementovaná ako navigačný landmark. Používateľom asistenčných technológií má jasne oznámiť, že ide o omrvinkovú navigáciu, a aktuálna stránka musí byť programovo označená.
Klávesové ovládanie
Tab– presun zamerania na nasledujúci odkaz v omrvinkovej navigácii.Shift + Tab– presun zamerania na predchádzajúci odkaz.Enter– aktivovanie odkazu a prechod na cieľovú stránku.
Základné pravidlá prístupnosti
- Celý komponent musí byť obalený v elemente
<nav>s prístupným názvom, napríkladaria-label="Omrvinková navigácia". - Položky omrvinkovej navigácie odporúčame implementovať ako usporiadaný zoznam pomocou prvkov
<ol>a<li>. - Klikateľné položky musia byť natívne odkazy pomocou prvku
<a>s platným atribútomhref. - Aktuálna stránka musí byť označená atribútom
aria-current="page". Aktuálna stránka nemá byť klikateľná, pokiaľ to nie je potrebné pre špecifický používateľský scenár. - Vizuálne oddeľovače medzi položkami musia byť skryté pred asistenčnými technológiami, ak sú súčasťou HTML. Ak sú vytvorené cez CSS pseudo-element, asistenčné technológie ich spravidla neoznamujú.
- Komponent nesmie nahrádzať hlavnú navigáciu ani indikátor postupu v lineárnom procese.
Implementácia omrvinkovej navigácie z ID-SK Frontend
Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia, ak chcete používať makrá.
Možnosti implementácie
1. Statická HTML implementácia
Ak projekt nevyužíva Node.js alebo bundler, môžete použiť kompilované a minifikované súbory zo zložky dist. Pri tomto spôsobe integrácie pracujete s hotovým HTML, CSS a JavaScriptom.
Skopírujte potrebné súbory a assety do projektu. Štruktúra môže vyzerať napríklad takto:
project/
│
├── assets/
│ ├── images/
│ └── fonts/
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikovaný CSS súbor. Na koniec body pripojte JavaScript a inicializujte komponenty.
<!DOCTYPE html>
<html lang="sk">
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
<script type="module">
import { initAll } from './frontend.min.js'
initAll()
</script>
</body>
</html>Zo stránky dokumentácie stiahnite HTML kód komponentu omrvinková navigácia (otvorí sa v novom okne) a vložte ho do svojho HTML.
<nav aria-label="Omrvinková navigácia">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/sekcia">
Sekcia
</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/sekcia/podsekcia">
Podsekcia
</a>
</li>
<li class="govuk-breadcrumbs__list-item" aria-current="page">
Aktuálna stránka
</li>
</ol>
</nav>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balík
Pre inštaláciu cez NPM spustite:
npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks/HTMLDo pripraveného súboru vložte HTML alebo Nunjucks makro podľa spôsobu integrácie.
- Importujte štýly
Pre import individuálneho IDSK komponentu do Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/breadcrumbs/breadcrumbs";