Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Breadcrumbs

Breadcrumbs

Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
    </li>
  </ol>
</div>

Macro

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

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

Breadcrumbs with one level

(open in a new window)
Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
  </ol>
</div>

Macro

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

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

Breadcrumbs with multiple levels

(open in a new window)
Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section">Section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
    </li>
  </ol>
</div>

Macro

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

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Section",
      "href": "/section"
    },
    {
      "text": "Sub-section",
      "href": "/section/sub-section"
    },
    {
      "text": "Sub Sub-section",
      "href": "/section/sub-section/sub-sub-section"
    }
  ]
}) }}

Breadcrumbs without the home section

(open in a new window)
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">Service Manual</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/service-manual/agile-delivery">Agile Delivery</a>
    </li>
  </ol>
</div>

Macro

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

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Service Manual",
      "href": "/service-manual"
    },
    {
      "text": "Agile Delivery",
      "href": "/service-manual/agile-delivery"
    }
  ]
}) }}

Breadcrumbs with last breadcrumb as current page

(open in a new window)
Code

Markup

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="/browse/abroad">Passports, travel and living abroad</a>
    </li>
    <li class="govuk-breadcrumbs__list-item" aria-current="page">Travel abroad</li>
  </ol>
</div>

Macro

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

{{ govukBreadcrumbs({
  "items": [
    {
      "text": "Home",
      "href": "/"
    },
    {
      "text": "Passports, travel and living abroad",
      "href": "/browse/abroad"
    },
    {
      "text": "Travel abroad"
    }
  ]
}) }}