Breadcrumbs - Omrvinková navigácia

Omrvinková navigácia

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

{% 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ť príklad na novej záložke

Code

Markup

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

Macro

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

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

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

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

{% 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ť príklad na novej záložke

Code

Markup

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

Macro

{% 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ť príklad na novej záložke

Code

Markup

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

Macro

{% 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ť príklad na novej záložke

Code

Markup

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

Macro

{% 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 inverse

Otvoriť príklad na novej záložke

Navigácia na tmavom pozadí

Code

Markup

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

Macro

{% 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"
    }
  ]
}) }}