EC System

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
  • Language selector
  • Search bar
{#
  Parameters:
    - "site_switcher" (object) (default: {}): shape of @ecl/ec-component-site-switcher
    - "user_menu" (object) (default: {}): shape of @ecl/ec-component-navigation-list
    - "logo" (object) (default: {
        'href': 'https://ec.europa.eu/info/index',
        'title': 'Home - European Commission'
      }): shape of @ecl/ec-component-logo
    - "messages" (object): shape of
      {
        "dismiss" (string) (default: 'Close'),
        "heading" (string) (default: 'Select your language')
      }
    - "languages" (array) (default: []): array of languages to display
    - "search_id" (string) (default: 'global-search')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-site-header' with {
  'site_switcher': site_switcher|default({}),
  'user_menu': user_menu|default({}),
  'logo': {
    'href': 'https://ec.europa.eu/info/index',
    'title': 'Home - European Commission'
  }|merge(logo|default({})),
  'messages': {
    'dismiss': 'Close',
    'heading': 'Select your language'
  }|merge(messages|default({})),
  'languages': languages|default([]),
  'search_id': search_id|default('global-search'),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'ec'
} only %}
 
{
  "global": {
    "language": "en"
  },
  "languages": [
    {
      "href": "index_bg",
      "hreflang": "bg",
      "label": "български",
      "lang": "bg"
    },
    {
      "href": "index_es",
      "hreflang": "es",
      "label": "español",
      "lang": "es"
    },
    {
      "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",
      "is_active": true,
      "label": "English",
      "lang": "en"
    },
    {
      "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 ecl-site-header__banner">

    <a href="https://ec.europa.eu/info/index" 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>
        <p id="ecl-dialog-description" class="ecl-u-sr-only"></p>
        <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_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_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_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-dialog__dismiss ecl-dialog__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 type="submit" class="ecl-button ecl-button--form ecl-search-form__button">Search</button>
    </form>
  </div>
</header>
  • Content: 
    /**
 * Site header
 * @define site-header ; weak
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-site-header/generic-component-site-header';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  (
    'ec-component-logo',
    'ec-component-language-list',
    'ec-component-search-form'
  )
);

// Use generic mixin
@include exports('ec-component-site-header') {
  @include ecl-site-header();
}
  • URL: /components/raw/ec-component-site-header/ec-component-site-header.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-site-header/ec-component-site-header.scss
  • Size: 482 Bytes
  • Handle: @ecl/ec-component-site-header
  • Tags: organism
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-site-header/ec-component-site-header.twig