Header - Hlavička
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" >
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
</div>
<div class="idsk-searchbar__wrapper" role="search">
<input class="govuk-input" type="search" placeholder="Zadajte hľadaný výraz" title="Zadajte hľadaný výraz" name="search" />
<button class="govuk-button govuk-button__basic" aria-label="Hľadať"><span class="material-icons" aria-hidden="true">search</span></button>
</div>
</div>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
searchPanel: true,
headerButtons: false
}) }}Hlavička neprihlásený používateľ (bez navigácie)
Otvoriť príklad na novej záložke: hlavička neprihlásený používateľ (bez navigácie)
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" >
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
</div>
<div class="idsk-searchbar__wrapper" role="search">
<input class="govuk-input" type="search" placeholder="Zadajte hľadaný výraz" title="Zadajte hľadaný výraz" name="search" />
<button class="govuk-button govuk-button__basic" aria-label="Hľadať"><span class="material-icons" aria-hidden="true">search</span></button>
</div>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlačidlo 1</button>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlačidlo 2</button>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation govuk-width-container">
<div class="btnWrapper desktop-hidden">
<button class="govuk-button govuk-button__basic">Tlacidlo 1</button>
<button class="govuk-button govuk-button__basic">Tlacidlo 2</button>
</div>
</nav>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: false,
navigation: {},
searchPanel: true,
headerButtons: true
}) }}Hlavička prihlásený používateľ (bez navigácie)
Otvoriť príklad na novej záložke: hlavička prihlásený používateľ (bez navigácie)
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" >
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
<div class="govuk-header__actionPanel mobile desktop-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
</div>
</div>
<div class="idsk-searchbar__wrapper" role="search">
<input class="govuk-input" type="search" placeholder="Zadajte hľadaný výraz" title="Zadajte hľadaný výraz" name="search" />
<button class="govuk-button govuk-button__basic" aria-label="Hľadať"><span class="material-icons" aria-hidden="true">search</span></button>
</div>
<div class="govuk-header__actionPanel desktop mobile-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
<button class="govuk-button govuk-header__profile_button" title="Profil">MM</button>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation govuk-width-container">
<dialog id="navigationProfileDialog">
<div class="govuk-header__profile">
<div class="govuk-header__profile__header mobile-hidden">
<div class="govuk-heading-m">Profil</div>
<button class="govuk-button govuk-button--texted govuk-header__profile_close_button"><span class="material-icons">close</span></button>
</div>
<div class="govuk-header__profile__body">
<img class="profile" src="https://placehold.co/100x100/072C66/FFFFFF?text=JH" alt="Profile"/>
<h4 class="govuk-heading-l">Janko Hruska</h4>
<span>RČ 123456/1234</span>
<button class="govuk-button govuk-button__basic">Primárne tlačidlo</button>
<button class="govuk-button govuk-button--texted govuk-button--texted__warning">Textové tlačidlo</button>
</div>
</div>
</dialog>
</nav>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: true,
navigation: {},
searchPanel: true,
headerButtons: false
}) }}Hlavička neprihlásený používateľ (s navigáciou)
Otvoriť príklad na novej záložke: hlavička neprihlásený používateľ (s navigáciou)
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" >
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
</div>
<div class="idsk-searchbar__wrapper" role="search">
<input class="govuk-input" type="search" placeholder="Zadajte hľadaný výraz" title="Zadajte hľadaný výraz" name="search" />
<button class="govuk-button govuk-button__basic" aria-label="Hľadať"><span class="material-icons" aria-hidden="true">search</span></button>
</div>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlačidlo 1</button>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlačidlo 2</button>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation govuk-width-container">
<span class="text">Menu</span>
<div class="govuk-header__navigation-list">
<ul>
<li
class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<a class="govuk-header__link" href="#1"title="67 ">
Sekcia 1
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#2"title="67 ">
Sekcia 2
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#3"title="67 ">
Sekcia 3
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#4"title="67 ">
Sekcia 4
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#5"title="67 ">
Sekcia 5
</a>
</li>
<li class="govuk-header__navigation-item">
<div class="idsk-dropdown__wrapper jano" data-pseudolabel="položky">
<a role="button" href="#" class="govuk-button govuk-button--texted idsk-dropdown" aria-label="Rozbaliť položky" aria-haspopup="listbox">
<span>Rozbaľovacia sekcia al la la</span>
<span class="material-icons" aria-hidden="true">keyboard_arrow_down</span>
</a>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 1">
<a href="#" lang="sk">
Podsekcia 1
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 2">
<a href="#" lang="sk">
Podsekcia 2
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 3">
<a href="#" lang="sk">
Podsekcia 3
</a>
</li>
</ul>
</div>
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<div class="idsk-dropdown__wrapper jano2" data-pseudolabel="položky">
<a role="button" href="#" class="govuk-button govuk-button--texted idsk-dropdown" aria-label="Rozbaliť položky" aria-haspopup="listbox">
<span>Rozbaľovacia sekcia</span>
<span class="material-icons" aria-hidden="true">keyboard_arrow_down</span>
</a>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 1">
<a href="#" lang="sk">
Podsekcia 1
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper active" active data-pseudolabel="Podsekcia 2">
<a href="#" lang="sk">
Podsekcia 2
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 3">
<a href="#" lang="sk">
Podsekcia 3
</a>
</li>
</ul>
</div>
</ul>
</div>
<div class="btnWrapper desktop-hidden">
<button class="govuk-button govuk-button__basic">Tlacidlo 1</button>
<button class="govuk-button govuk-button__basic">Tlacidlo 2</button>
</div>
</nav>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: false,
navigation: [
{
href: "#1",
text: "Sekcia 1",
active: true
},
{
href: "#2",
text: "Sekcia 2"
},
{
href: "#3",
text: "Sekcia 3"
},
{
href: "#4",
text: "Sekcia 4"
},
{
href: "#5",
text: "Sekcia 5"
}
],
searchPanel: true,
headerButtons: true
}) }}Hlavička prihlásený používateľ (s navigáciou)
Otvoriť príklad na novej záložke: hlavička prihlásený používateľ (s navigáciou)
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" >
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
<div class="govuk-header__actionPanel mobile desktop-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
</div>
</div>
<div class="idsk-searchbar__wrapper" role="search">
<input class="govuk-input" type="search" placeholder="Zadajte hľadaný výraz" title="Zadajte hľadaný výraz" name="search" />
<button class="govuk-button govuk-button__basic" aria-label="Hľadať"><span class="material-icons" aria-hidden="true">search</span></button>
</div>
<div class="govuk-header__actionPanel desktop mobile-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
<button class="govuk-button govuk-header__profile_button" title="Profil">MM</button>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation govuk-width-container">
<dialog id="navigationProfileDialog">
<div class="govuk-header__profile">
<div class="govuk-header__profile__header mobile-hidden">
<div class="govuk-heading-m">Profil</div>
<button class="govuk-button govuk-button--texted govuk-header__profile_close_button"><span class="material-icons">close</span></button>
</div>
<div class="govuk-header__profile__body">
<img class="profile" src="https://placehold.co/100x100/072C66/FFFFFF?text=JH" alt="Profile"/>
<h4 class="govuk-heading-l">Janko Hruska</h4>
<span>RČ 123456/1234</span>
<button class="govuk-button govuk-button__basic">Primárne tlačidlo</button>
<button class="govuk-button govuk-button--texted govuk-button--texted__warning">Textové tlačidlo</button>
</div>
</div>
</dialog>
<span class="text">Menu</span>
<div class="govuk-header__navigation-list">
<ul>
<li
class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<a class="govuk-header__link" href="#1"title="67 ">
Sekcia 1
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#2"title="67 ">
Sekcia 2
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#3"title="67 ">
Sekcia 3
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#4"title="67 ">
Sekcia 4
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#5"title="67 ">
Sekcia 5
</a>
</li>
<li class="govuk-header__navigation-item">
<div class="idsk-dropdown__wrapper jano" data-pseudolabel="položky">
<a role="button" href="#" class="govuk-button govuk-button--texted idsk-dropdown" aria-label="Rozbaliť položky" aria-haspopup="listbox">
<span>Rozbaľovacia sekcia al la la</span>
<span class="material-icons" aria-hidden="true">keyboard_arrow_down</span>
</a>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 1">
<a href="#" lang="sk">
Podsekcia 1
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 2">
<a href="#" lang="sk">
Podsekcia 2
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 3">
<a href="#" lang="sk">
Podsekcia 3
</a>
</li>
</ul>
</div>
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<div class="idsk-dropdown__wrapper jano2" data-pseudolabel="položky">
<a role="button" href="#" class="govuk-button govuk-button--texted idsk-dropdown" aria-label="Rozbaliť položky" aria-haspopup="listbox">
<span>Rozbaľovacia sekcia</span>
<span class="material-icons" aria-hidden="true">keyboard_arrow_down</span>
</a>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 1">
<a href="#" lang="sk">
Podsekcia 1
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper active" active data-pseudolabel="Podsekcia 2">
<a href="#" lang="sk">
Podsekcia 2
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="Podsekcia 3">
<a href="#" lang="sk">
Podsekcia 3
</a>
</li>
</ul>
</div>
</ul>
</div>
</nav>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: true,
navigation: [
{
href: "#1",
text: "Sekcia 1",
active: true
},
{
href: "#2",
text: "Sekcia 2"
},
{
href: "#3",
text: "Sekcia 3"
},
{
href: "#4",
text: "Sekcia 4"
},
{
href: "#5",
text: "Sekcia 5"
}
],
searchPanel: true,
headerButtons: false
}) }}Hlavička prihlásený s navigáciou v hlavičke
Otvoriť príklad na novej záložke: hlavička prihlásený s navigáciou v hlavičke
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" style="width: 100%" >
<nav aria-label="Menu" class="govuk-header__navigation mobile-hidden">
<ul class="govuk-header__navigation-list" style="border-top: 0">
<li class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<div class="govuk-header__link--wrapper">
<a class="govuk-header__link" href="#1"title="10 Otvorených úloh">
Sekcia 1
</a>
<div class="warning" aria-hidden="true">10</div>
</div>
</li>
<li class="govuk-header__navigation-item" >
<div class="govuk-header__link--wrapper">
<a class="govuk-header__link" href="#2"title="20 Neprečítaných správ">
Sekcia 2
</a>
<div class="warning" aria-hidden="true">20</div>
</div>
</li>
<li class="govuk-header__navigation-item" >
<div class="govuk-header__link--wrapper">
<a class="govuk-header__link" href="#3"title="15 Nevyžiadaných Správ">
Sekcia 3
</a>
<div class="warning" aria-hidden="true">15</div>
</div>
</li>
<li class="govuk-header__navigation-item" >
<div class="govuk-header__link--wrapper">
<a class="govuk-header__link" href="#4"title="78 Zverejnených položiek">
Sekcia 4
</a>
<div class="warning" aria-hidden="true">78</div>
</div>
</li>
<li class="govuk-header__navigation-item" >
<div class="govuk-header__link--wrapper">
<a class="govuk-header__link" href="#5"title="67 Ukončených úloh">
Sekcia 5
</a>
<div class="warning" aria-hidden="true">67</div>
</div>
</li>
</ul>
</nav>
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
<div class="govuk-header__actionPanel mobile desktop-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
</div>
</div>
<div class="govuk-header__actionPanel desktop mobile-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
<button class="govuk-button govuk-header__profile_button" title="Profil">MM</button>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation govuk-width-container">
<dialog id="navigationProfileDialog">
<div class="govuk-header__profile">
<div class="govuk-header__profile__header mobile-hidden">
<div class="govuk-heading-m">Profil</div>
<button class="govuk-button govuk-button--texted govuk-header__profile_close_button"><span class="material-icons">close</span></button>
</div>
<div class="govuk-header__profile__body">
<img class="profile" src="https://placehold.co/100x100/072C66/FFFFFF?text=JH" alt="Profile"/>
<h4 class="govuk-heading-l">Janko Hruska</h4>
<span>RČ 123456/1234</span>
<button class="govuk-button govuk-button__basic">Primárne tlačidlo</button>
<button class="govuk-button govuk-button--texted govuk-button--texted__warning">Textové tlačidlo</button>
</div>
</div>
</dialog>
<span class="text">Menu</span>
<div class="govuk-header__navigation-list desktop-hidden ">
<ul>
<li
class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<a class="govuk-header__link" href="#1"title="10 Otvorených úloh">
Sekcia 1
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#2"title="20 Neprečítaných správ">
Sekcia 2
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#3"title="15 Nevyžiadaných Správ">
Sekcia 3
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#4"title="78 Zverejnených položiek">
Sekcia 4
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#5"title="67 Ukončených úloh">
Sekcia 5
</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: true,
navbarHeader: [
{
href: "#1",
text: "Sekcia 1",
count: 10,
type: "Otvorených úloh",
active: true
},
{
href: "#2",
text: "Sekcia 2",
count: 20,
type: "Neprečítaných správ"
},
{
href: "#3",
text: "Sekcia 3",
count: 15,
type: "Nevyžiadaných Správ"
},
{
href: "#4",
text: "Sekcia 4",
count: 78,
type: "Zverejnených položiek"
},
{
href: "#5",
text: "Sekcia 5",
count: 67,
type: "Ukončených úloh"
}
],
searchPanel: false,
headerButtons: false
}) }}Hlavička bez navigácie v hlavičke
Otvoriť príklad na novej záložke: hlavička bez navigácie v hlavičke
Zdrojový kód
HTML
<div class="govuk-header__wrapper">
<header class="govuk-header idsk-shadow-head" data-module="govuk-header">
<div class="govuk-header__container ">
<div class="idsk-secondary-navigation govuk-width-container">
<div class="idsk-secondary-navigation__header">
<div class="idsk-secondary-navigation__heading">
<div class="idsk-secondary-navigation__heading-title">
<span class="idsk-secondary-navigation__heading-mobile">SK</span>
<span class="idsk-secondary-navigation__heading-desktop">Oficiálna stránka</span>
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button" aria-expanded="false" aria-label="Oficiálna stránka verejnej správy">
<span class="idsk-secondary-navigation__heading-mobile">e-Gov</span>
<span class="idsk-secondary-navigation__heading-desktop"><b>verejnej správy</b></span>
<span class="material-icons">arrow_drop_down</span>
</button>
</div>
<div class="idsk-secondary-navigation__body hidden" data-testid="secnav-children">
<div class="idsk-secondary-navigation__text">
<div>
<h3 class="govuk-body-s"><b>Doména gov.sk je oficiálna</b></h3>
<p class="govuk-body-s">Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. <a class="govuk-link--inverse" href="https://www.slovensko.sk/sk/agendy/agenda/_organy-verejnej-moci" target="_blank">Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.</a></p>
</div>
<div>
<h3 class="govuk-body-s"><b>Táto stránka je zabezpečená</b></h3>
<p class="govuk-body-s max-width77-desktop">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.</p>
</div>
</div>
</div>
</div>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse idsk-secondary-navigation__heading-button idsk-dropdown" aria-label="Rozbaliť jazykové menu" aria-haspopup="listbox">
<span>slovenčina</span>
<span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>
<ul class="idsk-dropdown__options idsk-shadow-medium">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="eng">
<a href="#" lang="en">
eng
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper " data-pseudolabel="slo">
<a href="#" lang="sk">
slo
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="govuk-predheader govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage" title="Odkaz na titulnú stránku">
<img src="/assets/images/logo-moje.png" alt="Moje Slovensko logo s odkazom na titulú stránku" />
</a>
</div>
<div class="govuk-header__btns-search" >
<div class="govuk-header__mobile-menu desktop-hidden">
<button type="button" class="govuk-header__menu-button font-bold govuk-js-header-toggle" aria-controls="navigation" hidden>
Menu
</button>
<div class="govuk-header__actionPanel mobile desktop-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
</div>
</div>
<div class="govuk-header__actionPanel desktop mobile-hidden">
<button class="govuk-button" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></button>
<button class="govuk-button" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></button>
<button class="govuk-button govuk-header__profile_button" title="Profil">MM</button>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation govuk-width-container">
<dialog id="navigationProfileDialog">
<div class="govuk-header__profile">
<div class="govuk-header__profile__header mobile-hidden">
<div class="govuk-heading-m">Profil</div>
<button class="govuk-button govuk-button--texted govuk-header__profile_close_button"><span class="material-icons">close</span></button>
</div>
<div class="govuk-header__profile__body">
<img class="profile" src="https://placehold.co/100x100/072C66/FFFFFF?text=JH" alt="Profile"/>
<h4 class="govuk-heading-l">Janko Hruska</h4>
<span>RČ 123456/1234</span>
<button class="govuk-button govuk-button__basic">Primárne tlačidlo</button>
<button class="govuk-button govuk-button--texted govuk-button--texted__warning">Textové tlačidlo</button>
</div>
</div>
</dialog>
</nav>
</div>
</header>
</div>
Makro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: true,
searchPanel: false,
headerButtons: false
}) }}