Header ID-SK

Header

(open in a new window)

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
}) }}

Header width without logo

(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
}) }}