Breadcrumbs - Omrvinková navigácia

Omrvinková navigácia

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section">Sekcia</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section/sub-section">Podsekcia</a>
      </li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Sekcia",
      href: "/section"
    },
    {
      text: "Podsekcia",
      href: "/section/sub-section"
    }
  ]
}) }}

Omrvinková navigácia s jednou úrovňou

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section">Sekcia</a>
      </li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Sekcia",
      href: "/section"
    }
  ]
}) }}

Omrvinková navigácia s viacerými úrovňami

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/">Domov</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section">Sekcia</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section/sub-section">Podsekcia</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-section">Pod podsekcia</a>
      </li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Domov",
      href: "/"
    },
    {
      text: "Sekcia",
      href: "/section"
    },
    {
      text: "Podsekcia",
      href: "/section/sub-section"
    },
    {
      text: "Pod podsekcia",
      href: "/section/sub-section/sub-section"
    }
  ]
}) }}

Omrvinková navigácia bez domácej sekcie

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/service-manual">Servisná príručka</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/section">Agílne doručenie</a>
      </li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Servisná príručka",
      href: "/service-manual"
    },
    {
      text: "Agílne doručenie",
      href: "/section"
    }
  ]
}) }}

Omrvinková navigácia s poslednou omrvinkou ako súčasná stránka

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/">Domov</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/browse/abroad">Pasy, cestovanie a život v zahraničí</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">Cestujte do zahraničia</li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  items: [
    {
      text: "Domov",
      href: "/"
    },
    {
      text: "Pasy, cestovanie a život v zahraničí",
      href: "/browse/abroad"
    },
    {
      text: "Cestujte do zahraničia"
    }
  ]
}) }}

Omrvinková navigácia so skrátením na mobile

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/">Domov</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/education">Vzdelávanie, školenie a zručnosti</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">Špeciálne vzdelávacie potreby a zdravotné postihnutie a vysoké potreby</li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  collapseOnMobile: true,
  items: [
    {
      text: "Domov",
      href: "/"
    },
    {
      text: "Vzdelávanie, školenie a zručnosti",
      href: "/education"
    },
    {
      text: "Špeciálne vzdelávacie potreby a zdravotné postihnutie a vysoké potreby"
    }
  ]
}) }}

Omrvinková navigácia na tmavom pozadí

Otvoriť ukážku na novej záložke

Navigácia na tmavom pozadí

Zdrojový kód

HTML

<nav aria-label="Omrvinková navigácia">
  <div class="govuk-breadcrumbs govuk-breadcrumbs--inverse">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/">Domov</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="/browse/abroad">Pasy, cestovanie a život v zahraničí</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">Cestujte do zahraničia</li>
    </ol>
  </div>
</nav>

Makro

{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

{{ govukBreadcrumbs({
  classes: "govuk-breadcrumbs--inverse",
  items: [
    {
      text: "Domov",
      href: "/"
    },
    {
      text: "Pasy, cestovanie a život v zahraničí",
      href: "/browse/abroad"
    },
    {
      text: "Cestujte do zahraničia"
    }
  ]
}) }}