<header class="gov-header">
<div class="gov-header__divider">
<div class="gov-header__content">
<gov-flex justify-content="space-between" align-items="center" responsive="false">
<a href="/" class="gov-header__logo" aria-label="Zpět na úvodní stránku">
<gov-flex align-items="center" gap="s" responsive="false">
<svg width="40" height="40" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.9996 30.6162V33.9503H28.3332V35.6167H26.6655V40.6172H24.9991V38.9508H23.3328V40.6172H21.6664V37.2831H23.3328V35.6167H24.9991V32.2839H23.3328V27.2834H20V32.2839H9.99914V30.6162H8.33276V28.9498H10.833V27.2834H12.4994V28.9498H14.9996V23.9506H21.6664V22.2829H20V20.6165H14.9996V22.2829H13.3332V20.6165H11.6655V22.2829H8.33276V23.9506H6.66638V22.2829H5V18.9501H6.66638V17.2837H8.33276V18.9501H9.99914V17.2837H13.3332V15.6173H11.6655V13.9497H9.99914V12.2833H6.66638V10.6169H8.33276V7.28407H6.66638V5.61639H9.99914V3.94999H11.6655V5.61639H13.3332V7.28407H11.6655V8.95047H13.3332V10.6169H14.9996V12.2833H16.666V10.6169H18.3323V8.95047H21.6664V7.28407H18.3323V5.61639H20V3.94999H24.9991V5.61639H26.6655V3.94999H28.3332V2.28359H29.9996V10.6169H28.3332V8.95047H26.6655V10.6169H28.3332V12.2833H26.6655V13.9497H24.9991V15.6173H26.6655V17.2837H24.9991V22.2829H26.6655V23.9506H28.3332V25.617H29.9996V23.9506H28.3332V20.6165H29.9996V18.9501H31.666V20.6165H33.3323V22.2829H31.666V25.617H33.3323V27.2834H34.9987V28.9498H31.666V30.6162H29.9996V28.9498H28.3332V27.2834H26.6655V30.6162H29.9996ZM24.9991 2.28359H20V0.617188H24.9991V2.28359ZM14.9996 7.28279H16.666V8.94918H14.9996V7.28279ZM26.6668 20.6165L26.6655 17.2837H28.3319V20.6165H26.6668ZM28.3332 17.2825V12.2833H29.9996V17.2825H28.3332ZM33.3323 20.6165V17.2837H34.9987V20.6165H33.3323ZM31.666 17.2825V12.2833H33.3323V17.2837L31.666 17.2825ZM33.3336 10.6169H35V12.2833H33.3323L33.3336 10.6169ZM33.3323 3.94999H34.9987V8.95047H33.3323L33.3336 10.6169H31.666V2.28359H33.3323V3.94999ZM29.9996 10.6169H31.666V12.2833H29.9996V10.6169ZM23.3328 33.9503V35.6167H21.6664V33.9503H23.3328ZM9.99914 32.2852V33.9516H8.33276V32.2852H9.99914Z" fill="currentColor" />
</svg> <span>Název úřadu</span>
</gov-flex>
</a>
<gov-flex class="gov-header__mobile" align-items="center" gap="s" responsive="false">
<gov-button color="primary" size="m" type="base" aria-label="Přihlásit se">
<gov-icon type="templates" name="person-fill" slot="icon-start" color="primary" size="m"></gov-icon>
</gov-button>
<gov-button color="primary" size="m" type="base" aria-label="Otevřít hlavní navigaci" class=" js-gov-header__navigation-trigger">
<gov-icon type="templates" name="list" slot="icon-start" color="primary" size="m"></gov-icon>
</gov-button>
</gov-flex>
</gov-flex>
<form role="search" id="search" class="gov-search gov-search--fixed-width">
<gov-form-control>
<gov-form-search size="m" color="neutral" aria-autocomplete="list" aria-haspopup="menu" aria-controls="suggestions" aria-expanded="true">
<gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, obsahu..." aria-label="Vyhledávání v obsahu webu" input-type="search">
<gov-icon type="templates" name="search" slot="icon-start"></gov-icon>
</gov-form-input>
<gov-button color="neutral" size="s" type="base" aria-label="Odstranit zadaný výraz" slot="button">
<gov-icon type="templates" name="x" slot="icon-start"></gov-icon>
</gov-button>
<gov-button color="primary" size="s" type="solid" aria-label="Vyhledat zadaný výraz" native-type="submit" slot="button">
<gov-icon type="templates" name="search" slot="icon-start"></gov-icon>
</gov-button>
</gov-form-search>
<div class="gov-desktop-only">
<section class="gov-suggestions" id="suggestions">
<gov-flex gap="s" responsive="false" class="gov-suggestions__search gov-mobile-only">
<gov-form-search size="m" color="neutral">
<gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, ..." aria-label="Hledejte v názvu, obsahu...">
<gov-icon slot="icon-start" type="components" name="search"></gov-icon>
</gov-form-input>
<gov-button color="neutral" size="m" type="base" slot="button-erase">
<gov-icon type="templates" name="x" slot="icon-start"></gov-icon>
</gov-button>
</gov-form-search>
<gov-button color="primary" size="m" type="base">
Zrušit
</gov-button>
</gov-flex>
<ul class="gov-suggestions__results gov-list--plain">
<li aria-labelledby="search-0">
<strong id="search-0">Naposledy hledané</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
cestovní pas
</gov-link>
<gov-button color="neutral" size="xs" type="base" aria-label="Odstranit výraz">
<gov-icon type="components" name="x-lg" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
pas rychle
</gov-link>
<gov-button color="neutral" size="xs" type="base" aria-label="Odstranit výraz">
<gov-icon type="components" name="x-lg" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-1">
<strong id="search-1">Naposledy navštívené</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání cestovního pasu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Evidence uchazeče - zprostředkování zaměstnání
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-2">
<strong id="search-2">Ostatní navštěvují</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Výpis z rejstříku trestů
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání občanského průkazu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání řidičského průkazu
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání cestovního pasu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Ohlášení změny místa trvalého pobytu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Změna trvalého pobytu
</gov-link>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-3">
<strong id="search-3" class=" gov-mb--s">Zkuste tyto kategorie</strong>
<nav class="gov-chips">
<ul class="gov-list--plain">
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Doklady
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Výpisy
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Doprava
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Daně a finance
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Manželství a partnerství
</gov-chip>
</li>
</ul>
</nav>
</li>
</ul>
</section>
</div>
</gov-form-control>
</form>
<gov-flex class="gov-header__action" justify-content="space-between" align-items="center" gap="m">
<gov-theme-switch size="m" aria-label=""></gov-theme-switch>
</gov-flex>
</div>
</div>
<div class="gov-header__navigation js-gov-header__navigation">
<nav class="gov-navigation" aria-label="Hlavní navigace" id="main-navigation">
<ul>
<li class="gov-navigation--has-megamenu">
<gov-button type="base" color="primary" size="l" aria-expanded="false" aria-controls="subnav0" aria-label="Úřad">
Úřad
<gov-icon slot="icon-end" type="templates" name="chevron-down" size="l"></gov-icon>
</gov-button>
<ul class="gov-mega-menu" id="megamenu0" hidden aria-hidden="true">
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li class="gov-mega-menu__heading">
<a href="#">
<span>
<gov-icon type="templates" name="briefcase" size="m"></gov-icon>
Heading item
</span>
</a>
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Menu item</a>
</li>
<li>
<a href="#">Menu item</a>
</li>
<li>
<a href="#">Menu item</a>
</li>
<li>
<gov-button type="base" color="primary" size="l" aria-expanded="false" aria-controls="subnav4" aria-label="Tisk a média">
Tisk a média
<gov-icon slot="icon-end" type="templates" name="chevron-down" size="l"></gov-icon>
</gov-button>
<ul class="gov-subnavigation" id="subnav4" hidden aria-hidden="true">
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</li>
<li>
<a href="#">Kontakty</a>
</li>
<li class="gov-mobile-only">
<gov-button color="primary" size="l" type="base" aria-label="Click to change language to English">
English
</gov-button>
</li>
<li class="gov-navigation__item gov-mobile-only">
<gov-theme-switch size="m" display-label="true"></gov-theme-switch>
</li>
</ul>
</nav>
</div>
<div class="gov-mobile-only">
<section class="gov-suggestions" id="suggestions">
<gov-flex gap="s" responsive="false" class="gov-suggestions__search gov-mobile-only">
<gov-form-search size="m" color="neutral">
<gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, ..." aria-label="Hledejte v názvu, obsahu...">
<gov-icon slot="icon-start" type="components" name="search"></gov-icon>
</gov-form-input>
<gov-button color="neutral" size="m" type="base" slot="button-erase">
<gov-icon type="templates" name="x" slot="icon-start"></gov-icon>
</gov-button>
</gov-form-search>
<gov-button color="primary" size="m" type="base">
Zrušit
</gov-button>
</gov-flex>
<ul class="gov-suggestions__results gov-list--plain">
<li aria-labelledby="search-0">
<strong id="search-0">Naposledy hledané</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
cestovní pas
</gov-link>
<gov-button color="neutral" size="xs" type="base" aria-label="Odstranit výraz">
<gov-icon type="components" name="x-lg" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
pas rychle
</gov-link>
<gov-button color="neutral" size="xs" type="base" aria-label="Odstranit výraz">
<gov-icon type="components" name="x-lg" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-1">
<strong id="search-1">Naposledy navštívené</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání cestovního pasu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Evidence uchazeče - zprostředkování zaměstnání
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-2">
<strong id="search-2">Ostatní navštěvují</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Výpis z rejstříku trestů
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání občanského průkazu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání řidičského průkazu
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání cestovního pasu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Ohlášení změny místa trvalého pobytu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Změna trvalého pobytu
</gov-link>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-3">
<strong id="search-3" class=" gov-mb--s">Zkuste tyto kategorie</strong>
<nav class="gov-chips" aria-label="Nabízené kategorie">
<ul class="gov-list--plain">
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Doklady
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Výpisy
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Doprava
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Daně a finance
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Manželství a partnerství
</gov-chip>
</li>
</ul>
</nav>
</li>
</ul>
</section>
</div>
</header>
{{ render '@header' header }}
{
"header": {
"suggestions": true,
"search": {
"suggestions": true,
"classes": [
"gov-search--fixed-width"
],
"heading": [
{
"heading": "Naposledy hledané",
"last": [
{
"text": "cestovní pas",
"button": {
"color": "neutral",
"type": "base",
"size": "xs",
"aria-label": "Odstranit výraz",
"icon-start": {
"slot": "icon-start",
"type": "components",
"name": "x-lg"
}
}
},
{
"text": "pas rychle",
"button": {
"color": "neutral",
"type": "base",
"size": "xs",
"aria-label": "Odstranit výraz",
"icon-start": {
"slot": "icon-start",
"type": "components",
"name": "x-lg"
}
}
}
]
},
{
"heading": "Naposledy navštívené",
"link": [
{
"name": "Vydání cestovního pasu"
},
{
"name": "Evidence uchazeče - zprostředkování zaměstnání",
"button": {
"text": "Vyřídit",
"color": "secondary",
"type": "solid",
"size": "xs"
}
}
]
},
{
"heading": "Ostatní navštěvují",
"link": [
{
"name": "Výpis z rejstříku trestů",
"button": {
"text": "Vyřídit",
"color": "secondary",
"type": "solid",
"size": "xs"
}
},
{
"name": "Vydání občanského průkazu"
},
{
"name": "Vydání řidičského průkazu",
"button": {
"text": "Vyřídit",
"color": "secondary",
"type": "solid",
"size": "xs"
}
},
{
"name": "Vydání cestovního pasu"
},
{
"name": "Ohlášení změny místa trvalého pobytu"
},
{
"name": "Změna trvalého pobytu"
}
]
},
{
"heading": "Zkuste tyto kategorie",
"classes": [
"gov-mb--s"
],
"chips": {
"chip": [
{
"name": "Doklady",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Výpisy",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Doprava",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Daně a finance",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Manželství a partnerství",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
}
]
}
}
]
}
}
}
No notes defined.