Europa Component Library

Site headers

Documentation • Demo

Site header

Why and how to use this component

The site header conveys the EC brand to the users and provides basic structure and guidance. It informs users about which site they are on and their current location in the site. It also provides users with context on the page they’re viewing and the site search and language switcher options.

When to use this component

  • on every page of every Commission website
  • detail and landing pages

Mandatory components

  • European Commission logo (mute version)*
  • Language selector
  • Search bar

Guidance*

The mute European Commission logo is a variation which was developed to allow multilingual purpose.

The use of the logo must be included in all European Commission website pages except for the homepage (Commission and its priorities and Policies, information and services)

The logo includes a link to the homepage of the Policies, information and services website.

{#
  For site switcher:
    - "site_switcher" (object) {
      - "political":  {
        - "href" (string): target of the link (default: '')
        - "label" (string): label of the link (default: '')
        - "is_active" (boolean): set active link (default: false)
      }
      - "info":  {
        - "href" (string): target of the link (default: '')
        - "label" (string): label of the link (default: '')
        - "is_active" (boolean): set active link (default: false)
      }
    }

  For user menu:
    - "user_menu" (object){
      - "title" (string): the title of the user menu (default: 'Navigation')
      - "links" (array): [
        - "href" (string): target of the link
        - "label" (string): label of the link
        - "is_active" (boolean): set active link
      ]
    }

  Generic:
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
    - "languages" (array): array of languages to display
#}

{# Internal properties #}

{% set _css_class = 'ecl-site-header' %}
{% set _extra_attributes = '' %}
{% set _languages = languages|default([]) %}


{# Internal logic - Process properties #}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}
<header class="{{ _css_class }}" role="banner"{{ _extra_attributes|raw }}>

  {% if user_menu is defined and user_menu is iterable %}
  <div class="ecl-container">
    {% include '@ec-europa/ecl-navigation-lists' with {
      variant: 'small',
      extra_classes: 'ecl-u-f-r'
    }|merge(user_menu) %}
  </div>
  {% endif %}

  {% if site_switcher is defined %}
  {% include '@ec-europa/ecl-site-switchers' with {
    variant: 'header'
    }|merge(site_switcher ) %}
  {% endif %}

  <div class="ecl-container ecl-site-header__banner">
    {% include '@ec-europa/ecl-logos' with {
      'to': 'https://ec.europa.eu',
      'title': 'Home - European Commission',
      'type': 'right',
      'extra_class': 'ecl-site-header__logo'
    } only %}
    {% include '@ec-europa/ecl-language-list' with {
      'extra_class': 'ecl-site-header__language-list',
      'languages': _languages,
      'variant': 'overlay',
      'messages': {
        'dismiss': 'Close',
        'heading': 'Select your language'
      }
    } %}
    {% include '@ec-europa/ecl-search-forms' with {
      'input': { 'id': 'global-search' },
      'extra_classes': 'ecl-site-header__search'
    } %}
  </div>
</header>
 
{
  "site_switcher": {
    "political": {
      "href": "#",
      "label": "Commission and its priorities"
    },
    "info": {
      "href": "#",
      "label": "Policies, information and services",
      "is_active": true
    }
  },
  "user_menu": {
    "title": "User menu",
    "links": [
      {
        "href": "#",
        "label": "My workbench"
      },
      {
        "href": "#",
        "label": "My account"
      },
      {
        "href": "#",
        "label": "Log out"
      }
    ]
  },
  "languages": [
    {
      "href": "index_bg",
      "hreflang": "bg",
      "label": "български",
      "lang": "bg"
    },
    {
      "href": "index_cs",
      "hreflang": "cs",
      "label": "čeština",
      "lang": "cs"
    },
    {
      "href": "index_da",
      "hreflang": "da",
      "label": "dansk",
      "lang": "da"
    },
    {
      "href": "index_de",
      "hreflang": "de",
      "label": "Deutsch",
      "lang": "de"
    },
    {
      "href": "index_et",
      "hreflang": "et",
      "label": "eesti",
      "lang": "et"
    },
    {
      "href": "index_el",
      "hreflang": "el",
      "label": "ελληνικά",
      "lang": "el"
    },
    {
      "href": "index_en",
      "hreflang": "en",
      "isActive": true,
      "label": "English",
      "lang": "en"
    },
    {
      "href": "index_es",
      "hreflang": "es",
      "label": "español",
      "lang": "es"
    },
    {
      "href": "index_fr",
      "hreflang": "fr",
      "label": "français",
      "lang": "fr"
    },
    {
      "href": "index_ga",
      "hreflang": "ga",
      "label": "Gaeilge",
      "lang": "ga"
    },
    {
      "href": "index_hr",
      "hreflang": "hr",
      "label": "hrvatski",
      "lang": "hr"
    },
    {
      "href": "index_it",
      "hreflang": "it",
      "label": "italiano",
      "lang": "it"
    },
    {
      "href": "index_lv",
      "hreflang": "lv",
      "label": "latviešu",
      "lang": "lv"
    },
    {
      "href": "index_lt",
      "hreflang": "lt",
      "label": "lietuvių",
      "lang": "lt"
    },
    {
      "href": "index_hu",
      "hreflang": "hu",
      "label": "magyar",
      "lang": "hu"
    },
    {
      "href": "index_mt",
      "hreflang": "mt",
      "label": "Malti",
      "lang": "mt"
    },
    {
      "href": "index_nl",
      "hreflang": "nl",
      "label": "Nederlands",
      "lang": "nl"
    },
    {
      "href": "index_pl",
      "hreflang": "pl",
      "label": "polski",
      "lang": "pl"
    },
    {
      "href": "index_pt",
      "hreflang": "pt",
      "label": "português",
      "lang": "pt-pt"
    },
    {
      "href": "index_ro",
      "hreflang": "ro",
      "label": "română",
      "lang": "ro"
    },
    {
      "href": "index_sk",
      "hreflang": "sk",
      "label": "slovenčina",
      "lang": "sk"
    },
    {
      "href": "index_sl",
      "hreflang": "sl",
      "label": "slovenščina",
      "lang": "sl"
    },
    {
      "href": "index_fi",
      "hreflang": "fi",
      "label": "suomi",
      "lang": "fi"
    },
    {
      "href": "index_sv",
      "hreflang": "sv",
      "label": "svenska",
      "lang": "sv"
    }
  ],
  "_demo": {
    "scripts": "\n        document.addEventListener('DOMContentLoaded', function () {\n          ECL.dialogs({\n            dialogOverlayId: 'ecl-overlay-language-list',\n            triggerElementsSelector: '#ecl-lang-select-sites__overlay'\n          });\n        });\n      "
  }
}
 
<header class="ecl-site-header" role="banner">

  <div class="ecl-container">

    <nav class="ecl-navigation-list-wrapper ecl-u-f-r">
      <h2 class="ecl-u-sr-only">User menu</h2>
      <ul class="ecl-navigation-list ecl-navigation-list--small">
        <li class="ecl-navigation-list__item">

          <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">My workbench</a>
        </li>
        <li class="ecl-navigation-list__item">

          <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">My account</a>
        </li>
        <li class="ecl-navigation-list__item">

          <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">Log out</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="ecl-site-switcher ecl-site-switcher--header">
    <ul class="ecl-site-switcher__list ecl-container">
      <li class="ecl-site-switcher__option">

        <a class="ecl-link ecl-link--header ecl-site-switcher__link" href="#">Commission and its priorities</a>
      </li>
      <li class="ecl-site-switcher__option ecl-site-switcher__option--is-selected">

        <a class="ecl-link ecl-link--header ecl-site-switcher__link" href="#">Policies, information and services</a>
      </li>
    </ul>
  </div>

  <div class="ecl-container ecl-site-header__banner">

    <a href="https://ec.europa.eu" class="ecl-logo ecl-logo--logotype ecl-site-header__logo" title="Home - European Commission">
  <span class="ecl-u-sr-only">Home - European Commission</span>
</a>

    <div class="ecl-language-list ecl-language-list--overlay ecl-site-header__language-list">

      <div id="ecl-overlay-language-list" class="ecl-dialog__overlay ecl-dialog__overlay--blue" aria-hidden="true"></div>

      <div class="ecl-lang-select-sites ecl-link" data-ecl-dialog="ecl-dialog" id="ecl-lang-select-sites__overlay">
        <a href="#" class="ecl-lang-select-sites__link">
    <span class="ecl-lang-select-sites__label">English</span>
    <span class="ecl-lang-select-sites__code">
      <span class="ecl-icon ecl-icon--language ecl-lang-select-sites__icon"></span>
      <span class="ecl-lang-select-sites__code-text">en</span>
    </span>
  </a>
      </div>

      <div class="ecl-dialog ecl-dialog--transparent ecl-dialog--wide" id="ecl-dialog" aria-labelledby="ecl-dialog-title" aria-describedby="ecl-dialog-description" aria-hidden="true" role="dialog">
        <h3 id="ecl-dialog-title" class="ecl-heading ecl-heading--h3 ecl-u-sr-only">Dialog</h3>
        <div class="ecl-dialog__body">
          <section>
            <div>
              <div class="ecl-container">
                <div class="ecl-row">
                  <div class="ecl-col-lg-8 ecl-offset-lg-2">
                    <h2 lang="en" class="ecl-heading ecl-heading--h2 ecl-dialog__title">
                      <span class="ecl-icon ecl-icon--generic-lang"></span> Select your language
                    </h2>
                    <div class="ecl-row">
                      <div class="ecl-col-md-6">

                        <a href="index_bg" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="bg" hreflang="bg" rel="alternate">български</a>

                        <a href="index_cs" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="cs" hreflang="cs" rel="alternate">čeština</a>

                        <a href="index_da" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="da" hreflang="da" rel="alternate">dansk</a>

                        <a href="index_de" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="de" hreflang="de" rel="alternate">Deutsch</a>

                        <a href="index_et" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="et" hreflang="et" rel="alternate">eesti</a>

                        <a href="index_el" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="el" hreflang="el" rel="alternate">ελληνικά</a>

                        <a href="index_en" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button ecl-language-list__button--active" lang="en" hreflang="en" rel="alternate">English<span class="ecl-icon ecl-icon--check ecl-u-f-r"></span></a>

                        <a href="index_es" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="es" hreflang="es" rel="alternate">español</a>

                        <a href="index_fr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fr" hreflang="fr" rel="alternate">français</a>

                        <a href="index_ga" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ga" hreflang="ga" rel="alternate">Gaeilge</a>

                        <a href="index_hr" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hr" hreflang="hr" rel="alternate">hrvatski</a>

                        <a href="index_it" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="it" hreflang="it" rel="alternate">italiano</a>
                      </div>
                      <div class="ecl-col-md-6">

                        <a href="index_lv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lv" hreflang="lv" rel="alternate">latviešu</a>

                        <a href="index_lt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="lt" hreflang="lt" rel="alternate">lietuvių</a>

                        <a href="index_hu" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="hu" hreflang="hu" rel="alternate">magyar</a>

                        <a href="index_mt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="mt" hreflang="mt" rel="alternate">Malti</a>

                        <a href="index_nl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="nl" hreflang="nl" rel="alternate">Nederlands</a>

                        <a href="index_pl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pl" hreflang="pl" rel="alternate">polski</a>

                        <a href="index_pt" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="pt-pt" hreflang="pt" rel="alternate">português</a>

                        <a href="index_ro" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="ro" hreflang="ro" rel="alternate">română</a>

                        <a href="index_sk" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sk" hreflang="sk" rel="alternate">slovenčina</a>

                        <a href="index_sl" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sl" hreflang="sl" rel="alternate">slovenščina</a>

                        <a href="index_fi" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="fi" hreflang="fi" rel="alternate">suomi</a>

                        <a href="index_sv" class="ecl-button ecl-button--default ecl-button--block ecl-language-list__button" lang="sv" hreflang="sv" rel="alternate">svenska</a>
                      </div>
                      <button class="ecl-message__dismiss ecl-message__dismiss--inverted">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

        </div>

      </div>
    </div>

    <form class="ecl-search-form ecl-site-header__search">
      <label class="ecl-search-form__textfield-wrapper">
    <span class="ecl-u-sr-only">Search this website</span>
    






  

  


<input
  type="search"
  class="ecl-text-input ecl-search-form__textfield"
  id="global-search"
  name="default-name"
  
/>
  </label>

      <button class="ecl-button ecl-button--form ecl-search-form__button" type="submit">Search</button>
    </form>
  </div>
</header>
  • Content: 
    /**
 * Site header
 * @define site-header ; weak
 */

.ecl-site-header {
  background-color: #fff;
  margin: 0;
  width: 100%;
}

.ecl-site-header__banner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: map-get($ecl-spacing, 's');
  padding-top: map-get($ecl-spacing, 's');
}

.ecl-site-header__banner > * {
  margin-top: map-get($ecl-spacing, 's');
}

// If the logo is linking to an external page do not show the external icon.
.ecl-site-header__logo {
  flex-grow: 0;
  flex-shrink: 0;
}

.ecl-site-header__language-list {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-end;
}

.ecl-site-header__search {
  flex-grow: 1;
}
  • URL: /components/raw/ecl-site-headers/_site-headers.scss
  • Filesystem Path: framework/components/ecl-site-headers/_site-headers.scss
  • Size: 712 Bytes
  • Handle: @ec-europa/ecl-site-headers
  • Tags: organism
  • Preview:
  • Filesystem Path: framework/components/ecl-site-headers/ecl-site-headers.twig