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.

ver. 2.11.0 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. Rázcestník
Webové komponenty

Rázcestník

Rázcestník má formu jednoduchej dlaždice, zloženej z nadpisu, popisku a oddeľovacej čiary. Jeho účelom je prehľadne a jednoducho zoskupiť resp. usporiadať pre používateľa odkazy na súvisiaci obsah, ktorý je rozmiestnený na rôznych, samostatných podstránkach.

Obsah:

Vlastnosti rázcestníka (desktop)

  • Hyperlinkový text - použite max. 50 znakov (vrátane medzier)
  • Popiska hyperlinku - použite max. 120 znakov (vrátane medzier)
Názov pre prvý prvok

Podnadpis pre prvý prvok

Názov pre druhý prvok

Podnadpis pre druhý prvok

Názov pre tretí prvok

Podnadpis pre tretí prvok

Názov pre štvrtý prvok

Podnadpis pre štvrtý prvok

Názov pre piaty prvok

Podnadpis pre piaty prvok

Názov pre šiesty prvok

Podnadpis pre šiesty prvok

Názov pre siedmy prvok

Podnadpis pre siedmy prvok

                    
<div data-module="idsk-crossroad" class="">
    <div class="idsk-crossroad idsk-crossroad-1">
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre prvý prvok" aria-hidden="false">Názov pre prvý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre prvý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre druhý prvok" aria-hidden="false">Názov pre druhý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre druhý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre tretí prvok" aria-hidden="false">Názov pre tretí prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre tretí prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre štvrtý prvok" aria-hidden="false">Názov pre štvrtý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre štvrtý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre piaty prvok" aria-hidden="false">Názov pre piaty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre piaty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre šiesty prvok" aria-hidden="false">Názov pre šiesty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre šiesty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Názov pre siedmy prvok" aria-hidden="false">Názov pre siedmy prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre siedmy prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
    </div>
</div>

Použitie rázcestníka

S nadpisom a podnadpisom: Rázcestník je jedným z komponentov, ktoré navigujú používateľa k obsahu vašej stránky. Použitím rázcestníka spolu s nadpisom a podnadpisom dáte používateľovi najavo, ktorý obsah (a ako) spolu na stránke súvisí.

V prípade použitia nadpisu a podnadpisu buďte struční a vecní. Ak rázcestník zoskupuje obsah, ktorý má vlastnú domovskú podstránku, v podnadpise na ňu odkážte s použitím hyperlinku (napr. všetok obsah k téme Informatizácia je zoskupený na hlavnej, domovskej stránke ale má aj k téme delegovanú podstránku). Ten istý hyperlink (ak to dáva zmysel), môže byť vložený aj do nadpisu rázcestníka.

V jednom alebo viacerých stĺpcoch: Rázcestník môžete štrukturovať do jedného alebo viacerých stĺpcov, musíte však dodržať IDSK pravidlá rozloženia stránky (grid).

Nadpis pre prvý prvok

Podnadpis pre prvý prvok

Nadpis pre druhý prvok

Podnadpis pre druhý prvok

Nadpis pre tretí prvok

Podnadpis pre tretí prvok

Nadpis pre štvrtý prvok

Podnadpis pre štvrtý prvok

Nadpis pre piaty prvok

Podnadpis pre piaty prvok

Nadpis pre šiesty prvok

Podnadpis pre šiesty prvok

Nadpis pre siedmy prvok

Podnadpis pre siedmy prvok

Nadpis pre ôsmy prvok

Podnadpis pre ôsmy prvok

                    
<div data-module="idsk-crossroad" class="">
    <div class="idsk-crossroad idsk-crossroad-2">
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre prvý prvok" aria-hidden="false">Nadpis pre prvý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre prvý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre druhý prvok" aria-hidden="false">Nadpis pre druhý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre druhý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre tretí prvok" aria-hidden="false">Nadpis pre tretí prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre tretí prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre štvrtý prvok" aria-hidden="false">Nadpis pre štvrtý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre štvrtý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
    </div>
    <div class="idsk-crossroad idsk-crossroad-2">
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre piaty prvok" aria-hidden="false">Nadpis pre piaty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre piaty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre šiesty prvok" aria-hidden="false">Nadpis pre šiesty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre šiesty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre siedmy prvok" aria-hidden="false">Nadpis pre siedmy prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre siedmy prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre ôsmy prvok" aria-hidden="false">Nadpis pre ôsmy prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre ôsmy prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
    </div>
</div>

Rázcestník len s 5 dlaždicami v jednom stĺpci: Rázcestník nepoužívajte s viac ako 5 dlaždicami v jednom stĺpci. Ak potrebujete použiť viac dlaždíc, použite komponent "rozbalovací rázcestník".

Základný blok 2, rozbaliteľný

Tento rozbaliteľný blok použite ak potrebujete alebo chcete v rázcestníku použiť viac ako 5 odkazov v jednom stĺpci, respektíve 10 odkazov v dvoch stĺpcoch.

Aby používateľ nebol zahltený veľkým množstvom informácií, časť obsahu bude skrytá. Používateľ ich môže odkryť stlačením textového tlačidla na konci rázcestníku.

Z čoho sa skladá rozbaliteľný blok?

Skladá sa z:

  1. rázcestník,
  2. čiastočne transparentné prekrytie piateho riadku,
  3. tlačidlo “zobraziť viac” pre zobrazenie ďaľších odkazov v rázcestníku.
Nadpis pre prvý prvok

Podnadpis pre prvý prvok

Nadpis pre druhý prvok

Podnadpis pre druhý prvok

Nadpis pre tretí prvok

Podnadpis pre tretí prvok

Nadpis pre štvrtý prvok

Podnadpis pre štvrtý prvok

Nadpis pre deviaty prvok

Podnadpis pre deviaty prvok

Nadpis pre desiaty prvok

Podnadpis pre desiaty prvok

Nadpis pre jedenásty prvok

Podnadpis pre jedenásty prvok

Nadpis pre dvanásty prvok

Podnadpis pre dvanásty prvok

                    
<div data-module="idsk-crossroad" class="">
    <div class="idsk-crossroad idsk-crossroad-2">
            <div class="idsk-crossroad__item                 
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre prvý prvok" aria-hidden="false">Nadpis pre prvý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre prvý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre druhý prvok" aria-hidden="false">Nadpis pre druhý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre druhý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre tretí prvok" aria-hidden="false">Nadpis pre tretí prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre tretí prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre štvrtý prvok" aria-hidden="false">Nadpis pre štvrtý prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre štvrtý prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre piaty prvok" aria-hidden="true">Nadpis pre piaty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre piaty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                 idsk-crossroad__item--two-columns-hide">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre šiesty prvok" aria-hidden="true">Nadpis pre šiesty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre šiesty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                 idsk-crossroad__item--two-columns-hide">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre siedmy prvok" aria-hidden="true">Nadpis pre siedmy prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre siedmy prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                 idsk-crossroad__item--two-columns-hide">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre ôsmy prvok" aria-hidden="true">Nadpis pre ôsmy prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre ôsmy prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
    </div>
    <div class="idsk-crossroad idsk-crossroad-2">
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre deviaty prvok" aria-hidden="false">Nadpis pre deviaty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre deviaty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre desiaty prvok" aria-hidden="false">Nadpis pre desiaty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre desiaty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre jedenásty prvok" aria-hidden="false">Nadpis pre jedenásty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre jedenásty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre dvanásty prvok" aria-hidden="false">Nadpis pre dvanásty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="false">Podnadpis pre dvanásty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                ">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre trinásty prvok" aria-hidden="true">Nadpis pre trinásty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre trinásty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                 idsk-crossroad__item--two-columns-hide">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre štrnásty prvok" aria-hidden="true">Nadpis pre štrnásty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre štrnásty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                 idsk-crossroad__item--two-columns-hide">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre pätnásty prvok" aria-hidden="true">Nadpis pre pätnásty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre pätnásty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
            <div class="idsk-crossroad__item                 idsk-crossroad__item--two-columns-hide-mobile
                 idsk-crossroad__item--two-columns-hide">
                <a href="#" class="govuk-link idsk-crossroad-title" title="Nadpis pre šestnásty prvok" aria-hidden="true">Nadpis pre šestnásty prvok
                </a>
                <p class="idsk-crossroad-subtitle" aria-hidden="true">Podnadpis pre šestnásty prvok</p>
                <hr class="idsk-crossroad-line" aria-hidden="true"/>
            </div>
    </div>
    <div class="govuk-grid-column-full idsk-crossroad__collapse--shadow idsk-crossroad__uncollapse-div  ">
        <button id="idsk-crossroad__uncollapse-button" class="idsk-crossroad__colapse--button" type="button" aria-expanded="false" aria-label="Rozbaliteľný rázcestník je zabalený" data-text-for-show="Rozbaliteľný rázcestník je rozbalený" data-text-for-hide="Rozbaliteľný rázcestník je zabalený" data-line1="Zobraziť viac" data-line2="Zobraziť menej">Zobraziť viac</button>
    </div>
</div>