Header - Hlavička
Hlavička
Otvoriť príklad na novej záložke: hlavička
The standard header as used on information pages
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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">Tlacidlo 1</button>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlacidlo 2</button>
</div>
</div>
</header>
</div>
Macro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({}) }}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)
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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">Tlacidlo 1</button>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlacidlo 2</button>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation ">
<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>
Macro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: false,
navigation: {}
}) }}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)
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
</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">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
<a href="#" class="govuk-link" title="Profil"><img class="profile mobile-hidden" src="https://placehold.co/40x40/072C66/FFFFFF?text=Profile" alt="Profile"/></a>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation ">
<div class="govuk-header__profile">
<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>
</nav>
</div>
</header>
</div>
Macro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
actionPanel: true,
navigation: {}
}) }}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)
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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">Tlacidlo 1</button>
<button class="govuk-button govuk-button__basic mobile-hidden">Tlacidlo 2</button>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation ">
<span class="text">Menu</span>
<div class="govuk-header__navigation-list">
<ul class="govuk-width-container">
<li
class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<a class="govuk-header__link" href="#1">
Sekcia 1
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#2">
Sekcia 2
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#3">
Sekcia 3
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#4">
Sekcia 4
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#5">
Sekcia 5
</a>
</li>
<li class="govuk-header__navigation-item dropdown-toggle">
<a href="#" class="govuk-header__link" aria-haspopup="menu" title="Zobraziť menu položky">Rozbaľovacie menu<span class="material-icons" aria-hidden="true">expand_more</span></a>
<ul class="submenu idsk-shadow-medium">
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">Menu 1</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">Menu 2 </a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">Menu 3</a>
</li>
</ul>
</li>
</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>
Macro
{% 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"
}
],
dropdown: 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)
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
</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">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
<a href="#" class="govuk-link" title="Profil"><img class="profile mobile-hidden" src="https://placehold.co/40x40/072C66/FFFFFF?text=Profile" alt="Profile"/></a>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation ">
<div class="govuk-header__profile">
<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>
<span class="text">Menu</span>
<div class="govuk-header__navigation-list">
<ul class="govuk-width-container">
<li
class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<a class="govuk-header__link" href="#1">
Sekcia 1
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#2">
Sekcia 2
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#3">
Sekcia 3
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#4">
Sekcia 4
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#5">
Sekcia 5
</a>
</li>
<li class="govuk-header__navigation-item dropdown-toggle">
<a href="#" class="govuk-header__link" aria-haspopup="menu" title="Zobraziť menu položky">Rozbaľovacie menu<span class="material-icons" aria-hidden="true">expand_more</span></a>
<ul class="submenu idsk-shadow-medium">
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">Menu 1</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">Menu 2 </a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">Menu 3</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
Macro
{% 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"
}
],
dropdown: true
}) }}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
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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 id="navigation" 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">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
</div>
</div>
<div class="govuk-header__actionPanel desktop mobile-hidden">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
<a href="#" class="govuk-link" title="Profil"><img class="profile mobile-hidden" src="https://placehold.co/40x40/072C66/FFFFFF?text=Profile" alt="Profile"/></a>
</div>
</div>
</div>
<nav id="navigation" aria-label="Menu" class="govuk-header__navigation desktop-hidden ">
<div class="govuk-header__profile">
<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>
<span class="text">Menu</span>
<div class="govuk-header__navigation-list">
<ul class="govuk-width-container">
<li
class="govuk-header__navigation-item govuk-header__navigation-item--active" aria-current="page">
<a class="govuk-header__link" href="#1">
Sekcia 1
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#2">
Sekcia 2
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#3">
Sekcia 3
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#4">
Sekcia 4
</a>
</li>
<li
class="govuk-header__navigation-item" >
<a class="govuk-header__link" href="#5">
Sekcia 5
</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
Macro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
navbarHeader: true,
actionPanel: true,
navigation: [
{
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"
}
],
dropdown: 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
Code
Markup
<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>
<div class="idsk-dropdown__wrapper idsk-secondary-navigation__dropdown" data-pseudolabel="jazykové menu">
<button class="govuk-button govuk-button--texted--inverse 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 id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
<a href="#" lang="en">
english
</a>
</li>
<li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="slovenčina">
<a href="#" lang="sk">
slovenčina
</a>
</li>
</ul>
</div>
</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 id="navigation" class="govuk-header__navigation-list" style="border-top: 0" >
</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">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
</div>
</div>
<div class="govuk-header__actionPanel desktop mobile-hidden">
<a href="#" class="govuk-link" title="Notifikácie"><span role="button" class="material-icons" aria-hidden="true">notifications</span></a>
<a href="#" class="govuk-link" title="Informácie o portáli"><span role="button" class="material-icons" aria-hidden="true">info</span></a>
<a href="#" class="govuk-link" title="Profil"><img class="profile mobile-hidden" src="https://placehold.co/40x40/072C66/FFFFFF?text=Profile" alt="Profile"/></a>
</div>
</div>
</div>
</header>
</div>
Macro
{% from "govuk/components/header/macro.njk" import govukHeader %}
{{ govukHeader({
navbarHeader: true,
actionPanel: true
}) }}