template.njk

<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
        {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
  <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
    <div class="govuk-header__logo">
      <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
        <span class="govuk-header__logotype">
          {#- We use an inline SVG for the crown so that we can cascade the
          currentColor into the crown whilst continuing to support older browsers
          which do not support external SVGs without a Javascript polyfill. This
          adds approximately 1kb to every page load.

          We use currentColour so that we can easily invert it when printing and
          when the focus state is applied. This also benefits users who override
          colours in their browser as they will still see the crown.

          The SVG needs `focusable="false"` so that Internet Explorer does not
          treat it as an interactive element - without this it will be
          'focusable' when using the keyboard to navigate. #}
          <svg
            role="presentation"
            focusable="false"
            class="govuk-header__logotype-crown"
            xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 132 97"
            height="30"
            width="36"
          >
            <path
              fill="currentColor" fill-rule="evenodd"
              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
            ></path>
            {#- Fallback PNG image for older browsers.

            The <image> element is a valid SVG element. In SVG, you would specify
            the URL of the image file with the xlink:href – as we don't reference an
            image it has no effect. It's important to include the empty xlink:href
            attribute as this prevents versions of IE which support SVG from
            downloading the fallback image when they don't need to.

            In other browsers <image> is synonymous for the <img> tag and will be
            interpreted as such, displaying the fallback image. #}
            <image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
          </svg>
          <span class="govuk-header__logotype-text">
            GOV.UK
          </span>
        </span>
        {% if (params.productName) %}
        <span class="govuk-header__product-name">
          {{ params.productName }}
        </span>
        {% endif %}
      </a>
    </div>
    {% if params.serviceName or params.navigation  %}
    <div class="govuk-header__content">
    {% if params.serviceName %}
    <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
      {{ params.serviceName }}
    </a>
    {% endif %}
    {% if params.navigation %}
    <button type="button" role="button" class="govuk-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="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
        {% for item in params.navigation %}
          {% if item.href and item.text %}
            <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                {{ item.text }}
              </a>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
    {% endif %}
    </div>
    {% endif %}
  </div>
</header>