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

Doména gov.sk je oficiálna

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

Táto stránka je zabezpečená

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

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

  1. ID-SK Frontend
  2. Header

Header ID-SK

The standard header as used on information pages on ID-SK

Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
      </a>
    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": true
}) }}

Header with service name

(open in a new window)

If your service is more than a few pages long, you can help users understand where they are by adding the service name.

Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    <a href="/components/header" class="idsk-header__link idsk-header__link--service-name">
      Service Name
    </a>
    

    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "serviceName": "Service Name",
  "serviceUrl": "/components/header"
}) }}

Header with navigation

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#4">
                Navigation item 4
              </a>
            </li>
      </ul>
    </nav>

    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    },
    {
      "href": "#4",
      "text": "Navigation item 4"
    }
  ]
}) }}

Header with service name and navigation

(open in a new window)

If you need to include basic navigation, contact or account management links.

Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    <a href="/components/header" class="idsk-header__link idsk-header__link--service-name">
      Service Name
    </a>
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#4">
                Navigation item 4
              </a>
            </li>
      </ul>
    </nav>

    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "serviceName": "Service Name",
  "serviceUrl": "/components/header",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    },
    {
      "href": "#4",
      "text": "Navigation item 4"
    }
  ]
}) }}

Header with large navigation

(open in a new window)

An edge case example with a large number of navitation items with long names used to test wrapping

Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/benefits">
                Benefits
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/births-deaths-marriages">
                Births, deaths, marriages and care
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/business">
                Business and self-employed
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/childcare-parenting">
                Childcare and parenting
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/citizenship">
                Citizenship and living in the UK
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/justice">
                Crime, justice and the law
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/disabilities">
                Disabled people
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/driving">
                Driving and transport
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/education">
                Education and learning
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/employing-people">
                Employing people
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/environment-countryside">
                Environment and countryside
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/housing-local-services">
                Housing and local services
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/tax">
                Money and tax
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/abroad">
                Passports, travel and living abroad
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/visas-immigration">
                Visas and immigration
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="/browse/working">
                Working, jobs and pensions
              </a>
            </li>
      </ul>
    </nav>

    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "navigation": [
    {
      "href": "/browse/benefits",
      "text": "Benefits"
    },
    {
      "href": "/browse/births-deaths-marriages",
      "text": "Births, deaths, marriages and care"
    },
    {
      "href": "/browse/business",
      "text": "Business and self-employed"
    },
    {
      "href": "/browse/childcare-parenting",
      "text": "Childcare and parenting"
    },
    {
      "href": "/browse/citizenship",
      "text": "Citizenship and living in the UK"
    },
    {
      "href": "/browse/justice",
      "text": "Crime, justice and the law"
    },
    {
      "href": "/browse/disabilities",
      "text": "Disabled people"
    },
    {
      "href": "/browse/driving",
      "text": "Driving and transport"
    },
    {
      "href": "/browse/education",
      "text": "Education and learning"
    },
    {
      "href": "/browse/employing-people",
      "text": "Employing people"
    },
    {
      "href": "/browse/environment-countryside",
      "text": "Environment and countryside"
    },
    {
      "href": "/browse/housing-local-services",
      "text": "Housing and local services"
    },
    {
      "href": "/browse/tax",
      "text": "Money and tax"
    },
    {
      "href": "/browse/abroad",
      "text": "Passports, travel and living abroad"
    },
    {
      "href": "/browse/visas-immigration",
      "text": "Visas and immigration"
    },
    {
      "href": "/browse/working",
      "text": "Working, jobs and pensions"
    }
  ]
}) }}

Header with product name

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "navigationClasses": "govuk-header__navigation--end",
  "productName": "Product Name"
}) }}

Header full width

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-header__container--full-width">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "containerClasses": "govuk-header__container--full-width",
  "navigationClasses": "govuk-header__navigation--end",
  "productName": "Product Name"
}) }}

Header full width with navigation

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-header__container--full-width">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation govuk-header__navigation--end" aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
      </ul>
    </nav>

    </div>
    

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "containerClasses": "govuk-header__container--full-width",
  "navigationClasses": "govuk-header__navigation--end",
  "productName": "Product Name",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    }
  ]
}) }}

Header full width with user

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-header__container--with-user govuk-header__container--full-width">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
      </ul>
    </nav>

    </div>
    
    <div class="idsk-header__user govuk-grid-column-one-quarter idsk-header__user--end">
      <svg class="idsk-header__user-icon" viewBox="0 0 28 28"><path d="M5 21.9C5 19.8 6.8 18 9 18h10c2.2 0 4 1.8 4 3.9 1.9-2.1 3-4.9 3-7.9 0-6.6-5.4-12-12-12S2 7.4 2 14c0 3 1.1 5.8 3 7.9zm9 6.1C6.3 28 0 21.7 0 14S6.3 0 14 0s14 6.3 14 14-6.3 14-14 14zm0-12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
      <div class="idsk--header__user-name">
        <span>Meno Priezvisko</span>
        <div><a href="#" class="idsk--header__user-logout">Odhlásiť sa</a></div>
      </div>
    </div>

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "containerClasses": "govuk-header__container--with-user govuk-header__container--full-width",
  "usersClasses": "idsk-header__user--end",
  "productName": "Product Name",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    }
  ],
  "headerUser": true
}) }}

Header width with user

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-header__container--with-user govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    <a href="" class="idsk-header__link idsk-header__link--service-name">
      Service Name
    </a>
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
      </ul>
    </nav>

    </div>
    
    <div class="idsk-header__user govuk-grid-column-one-quarter idsk-header__user--end">
      <svg class="idsk-header__user-icon" viewBox="0 0 28 28"><path d="M5 21.9C5 19.8 6.8 18 9 18h10c2.2 0 4 1.8 4 3.9 1.9-2.1 3-4.9 3-7.9 0-6.6-5.4-12-12-12S2 7.4 2 14c0 3 1.1 5.8 3 7.9zm9 6.1C6.3 28 0 21.7 0 14S6.3 0 14 0s14 6.3 14 14-6.3 14-14 14zm0-12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
      <div class="idsk--header__user-name">
        <span>Meno Priezvisko</span>
        <div><a href="#" class="idsk--header__user-logout">Odhlásiť sa</a></div>
      </div>
    </div>

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "containerClasses": "govuk-header__container--with-user govuk-width-container",
  "usersClasses": "idsk-header__user--end",
  "productName": "Product Name",
  "serviceName": "Service Name",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    }
  ],
  "headerUser": true
}) }}

Header width with user

(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-header__container--with-user govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__logotype">
          <img src="/assets/images/slovensko_sk_logo.svg" alt="hlavička logo">
        </span>
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    <a href="" class="idsk-header__link idsk-header__link--service-name">
      Service Name
    </a>
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
      </ul>
    </nav>

    </div>
    
    <div class="idsk-header__user govuk-grid-column-one-quarter idsk-header__user--end">
      <svg class="idsk-header__user-icon" viewBox="0 0 28 28"><path d="M5 21.9C5 19.8 6.8 18 9 18h10c2.2 0 4 1.8 4 3.9 1.9-2.1 3-4.9 3-7.9 0-6.6-5.4-12-12-12S2 7.4 2 14c0 3 1.1 5.8 3 7.9zm9 6.1C6.3 28 0 21.7 0 14S6.3 0 14 0s14 6.3 14 14-6.3 14-14 14zm0-12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
      <div class="idsk--header__user-name">
        <span>Meno Priezvisko</span>
        <div><a href="#" class="idsk--header__user-logout">Odhlásiť sa</a></div>
      </div>
    </div>

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "logo": "true,",
  "containerClasses": "govuk-header__container--with-user govuk-width-container",
  "usersClasses": "idsk-header__user--end",
  "productName": "Product Name",
  "serviceName": "Service Name",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    }
  ],
  "headerUser": true
}) }}
(open in a new window)
Code

Markup


<header class="idsk-header " data-module="idsk-header">
  <div class="idsk-header__container govuk-header__container--with-user govuk-width-container">
    <div class="idsk-header__logo">
      <a href="/" class="idsk-header__link idsk-header__link--homepage">
        <span class="idsk-header__product-name">
          Product Name
        </span>
      </a>
    </div>
    <div class="idsk-header__content">
    
    <a href="" class="idsk-header__link idsk-header__link--service-name">
      Service Name
    </a>
    
    <button type="button" class="idsk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top level navigation">Menu</button>
    <nav>
      <ul id="navigation" class="idsk-header__navigation " aria-label="Top level navigation">
            <li class="idsk-header__navigation-item idsk-header__navigation-item--active">
              <a class="idsk-header__link" href="#1">
                Navigation item 1
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#2">
                Navigation item 2
              </a>
            </li>
            <li class="idsk-header__navigation-item">
              <a class="idsk-header__link" href="#3">
                Navigation item 3
              </a>
            </li>
      </ul>
    </nav>

    </div>
    
    <div class="idsk-header__user govuk-grid-column-one-quarter idsk-header__user--end">
      <svg class="idsk-header__user-icon" viewBox="0 0 28 28"><path d="M5 21.9C5 19.8 6.8 18 9 18h10c2.2 0 4 1.8 4 3.9 1.9-2.1 3-4.9 3-7.9 0-6.6-5.4-12-12-12S2 7.4 2 14c0 3 1.1 5.8 3 7.9zm9 6.1C6.3 28 0 21.7 0 14S6.3 0 14 0s14 6.3 14 14-6.3 14-14 14zm0-12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
      <div class="idsk--header__user-name">
        <span>Meno Priezvisko</span>
        <div><a href="#" class="idsk--header__user-logout">Odhlásiť sa</a></div>
      </div>
    </div>

  </div>
</header>

Macro

{% from "header/macro.njk" import idskHeader %}

{{ idskHeader({
  "containerClasses": "govuk-header__container--with-user govuk-width-container",
  "usersClasses": "idsk-header__user--end",
  "productName": "Product Name",
  "serviceName": "Service Name",
  "navigation": [
    {
      "href": "#1",
      "text": "Navigation item 1",
      "active": true
    },
    {
      "href": "#2",
      "text": "Navigation item 2"
    },
    {
      "href": "#3",
      "text": "Navigation item 3"
    }
  ],
  "headerUser": true
}) }}