EU System

Global navigation: Light

Documentation • Demo

Global navigation

What is it?

Why?

  • To improve the user experience: users recognize that they are on an official website of the European Union part of the EU family.
  • Standard way for all sites under Europa.eu to link to Europa.eu and other institutions. Currently on each institution site the links to Europa.eu and other institutions is done differently on each site.
  • When users navigate via Europa.eu to a site of another institution’s site, they go out of the site and no easy way recognisable way to come back
{#
  - "modifier" (string): can be "light" or "dark" (default: "light")
  - "official" (object): {
    - "href" (string): target of the link (default: "#")
    - "label" (string): label of the link for desktop (default: '')
    - "label_mobile" (string): label of the link for mobile (default: '')
  }
  - "institutions" (object): {
    - "href" (string): target of the link (default: "#")
    - "label" (string): label of the link for desktop (default: '')
    - "label_mobile" (string): label of the link for mobile (default: '')
    - "links" (array): array of links components (default: [])
  }
  - "info" (string): descriptive text (default: '')
  - "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'}])
#}

{# Internal properties #}

{% set _modifier = modifier|default('light') %}
{% set _official = official|default({'href': '#', 'label': '', 'label_mobile': ''}) %}
{% set _institutions = institutions|default({'href': '#', 'label': '', 'label_mobile': '', 'links': []}) %}
{% set _info = info|default('') %}
{% set _css_class = 'ecl-global-navigation ecl-global-navigation--' ~ _modifier %}
{% set _extra_attributes = '' %}
{% set _extra_classes = extra_classes|default('') %}

{# Internal logic - Process properties #}

{% if _extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ _extra_classes %}
{% endif %}

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

{# Print the result #}

<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <ul class="ecl-global-navigation__list">
    <li class="ecl-global-navigation__option">
      {% include '@ecl/eu-component-link' with {
        'href': _official.href,
        'label': '
          <span class="ecl-global-navigation__label ecl-u-d-none ecl-u-d-md-inline">' ~ _official.label ~ '</span>
          <span class="ecl-global-navigation__label ecl-u-d-md-none">' ~ _official.label_mobile ~ '</span>',
        'extra_classes': 'ecl-global-navigation__link ecl-global-navigation__link--official',
        }
      %}
    </li>

    <li class="ecl-global-navigation__option">
      {% include '@ecl/eu-component-link' with {
        'href': _institutions.href,
        'label': '
          <span class="ecl-global-navigation__label ecl-u-d-none ecl-u-d-md-inline">' ~ _institutions.label ~ '</span>
          <span class="ecl-global-navigation__label ecl-u-d-md-none">' ~ _institutions.label_mobile ~ '</span>',
        'extra_classes': 'ecl-global-navigation__link ecl-global-navigation__link--institution ecl-expandable__button',
        'extra_attributes': [
          { 'name': 'aria-controls', 'value': 'ecl-global-navigation-toggle' },
          { 'name': 'aria-expanded', 'value': 'false' },
          { 'name': 'id', 'value': 'ecl-global-navigation-toggle-button'},
        ]}
      %}
    </li>
  </ul>
  <div
    aria-hidden="true"
    aria-labelledby="ecl-global-navigation-toggle-button"
    id="ecl-global-navigation-toggle"
    class="ecl-u-aria ecl-global-navigation__toggle">

    <div class="ecl-global-navigation__toggle-content">
      <ul class="ecl-global-navigation__institution-list">
      {% for _link in _institutions.links %}
        <li class="ecl-global-navigation__institution-item">
          {% include '@ecl/eu-component-link' with {
            'extra_classes': 'ecl-global-navigation__institution-link',
            }|merge(_link|default({}))
          %}
        </li>
      {% endfor %}
      </ul>

      <div class="ecl-global-navigation__info">
        {{ _info }}
      </div>
    </div>
  </div>
</div>
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.initExpandables('#ecl-global-navigation-toggle-button');\n      });"
  },
  "official": {
    "href": "http://europa.eu/",
    "label": "An official website of the European Union",
    "label_mobile": "European Union"
  },
  "institutions": {
    "href": "https://europa.eu/european-union/about-eu/institutions-bodies_en",
    "label": "See all EU institutions and bodies",
    "label_mobile": "Institutions and bodies",
    "links": [
      {
        "href": "http://www.europarl.europa.eu",
        "label": "European Parliament"
      },
      {
        "href": "https://www.consilium.europa.eu/en/european-council/",
        "label": "European Council"
      },
      {
        "href": "https://www.consilium.europa.eu/en/council-eu/",
        "label": "Council of the European Union"
      },
      {
        "href": "https://ec.europa.eu/",
        "label": "European Commission"
      },
      {
        "href": "https://curia.europa.eu/",
        "label": "Court of Justice of the European Union"
      },
      {
        "href": "https://www.ecb.europa.eu",
        "label": "European Central Bank"
      },
      {
        "href": "https://www.eca.europa.eu",
        "label": "European Court of Auditors"
      },
      {
        "href": "https://eeas.europa.eu",
        "label": "European External Action Service"
      },
      {
        "href": "http://www.eesc.europa.eu",
        "label": "European Economic and Social Committee"
      },
      {
        "href": "http://cor.europa.eu",
        "label": "European Committee of the Regions"
      },
      {
        "href": "http://eib.europa.eu",
        "label": "European Investment Bank"
      },
      {
        "href": "https://www.ombudsman.europa.eu",
        "label": "European Ombudsman"
      },
      {
        "href": "https://edps.europa.eu/",
        "label": "European Data Protection Supervisor"
      },
      {
        "href": "https://epso.europa.eu",
        "label": "European Personnel Selection Office"
      },
      {
        "href": "https://publications.europa.eu",
        "label": "Publications Office of the European Union"
      },
      {
        "href": "https://europa.eu/european-union/about-eu/agencies_en",
        "label": "Agencies"
      }
    ]
  },
  "info": "All official European Union website addresses are in the \"europa.eu\" domain"
}
 
<div class="ecl-global-navigation ecl-global-navigation--light">
  <ul class="ecl-global-navigation__list">
    <li class="ecl-global-navigation__option">

      <a class="ecl-link ecl-global-navigation__link ecl-global-navigation__link--official" href="http://europa.eu/">
        <span class="ecl-global-navigation__label ecl-u-d-none ecl-u-d-md-inline">An official website of the European Union</span>
        <span class="ecl-global-navigation__label ecl-u-d-md-none">European Union</span></a>
    </li>

    <li class="ecl-global-navigation__option">

      <a class="ecl-link ecl-global-navigation__link ecl-global-navigation__link--institution ecl-expandable__button" href="https://europa.eu/european-union/about-eu/institutions-bodies_en" aria-controls="ecl-global-navigation-toggle" aria-expanded="false" id="ecl-global-navigation-toggle-button">
        <span class="ecl-global-navigation__label ecl-u-d-none ecl-u-d-md-inline">See all EU institutions and bodies</span>
        <span class="ecl-global-navigation__label ecl-u-d-md-none">Institutions and bodies</span></a>
    </li>
  </ul>
  <div aria-hidden="true" aria-labelledby="ecl-global-navigation-toggle-button" id="ecl-global-navigation-toggle" class="ecl-u-aria ecl-global-navigation__toggle">

    <div class="ecl-global-navigation__toggle-content">
      <ul class="ecl-global-navigation__institution-list">
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="http://www.europarl.europa.eu">European Parliament</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://www.consilium.europa.eu/en/european-council/">European Council</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://www.consilium.europa.eu/en/council-eu/">Council of the European Union</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://ec.europa.eu/">European Commission</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://curia.europa.eu/">Court of Justice of the European Union</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://www.ecb.europa.eu">European Central Bank</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://www.eca.europa.eu">European Court of Auditors</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://eeas.europa.eu">European External Action Service</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="http://www.eesc.europa.eu">European Economic and Social Committee</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="http://cor.europa.eu">European Committee of the Regions</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="http://eib.europa.eu">European Investment Bank</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://www.ombudsman.europa.eu">European Ombudsman</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://edps.europa.eu/">European Data Protection Supervisor</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://epso.europa.eu">European Personnel Selection Office</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://publications.europa.eu">Publications Office of the European Union</a>
        </li>
        <li class="ecl-global-navigation__institution-item">

          <a class="ecl-link ecl-global-navigation__institution-link" href="https://europa.eu/european-union/about-eu/agencies_en">Agencies</a>
        </li>
      </ul>

      <div class="ecl-global-navigation__info">
        All official European Union website addresses are in the "europa.eu" domain
      </div>
    </div>
  </div>
</div>
  • Content: 
    /**
* Global navigation component
* @define global-navigation
*/

.ecl-global-navigation {
  @include ecl-hidden-print();

  background-color: map-get($ecl-colors, 'grey-10');
  font-size: map-get($ecl-font-size, 's');
  margin: 0;
}

.ecl-global-navigation__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecl-global-navigation__option {
  flex-grow: 1;
}

.ecl-global-navigation__link {
  color: map-get($ecl-colors, 'grey-100');;
  display: block;
  line-height: 1.3;
  padding: map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 's');
  text-decoration: none;
  width: 100%;

  &:hover,
  &:focus {
    text-decoration: underline;
  }

  &:visited {
    color: map-get($ecl-colors, 'grey-100');;
  }
}

.ecl-global-navigation__link--official {
  align-items: center;
  display: flex;
  position: relative;

  .ecl-global-navigation__label {
    padding-left: map-get($ecl-spacing, 'xl');
  }

  &::before {
    background: url($ecl-assets-path+'images/logo.svg') no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 37px;
  }
}

.ecl-global-navigation__link--institution {
  background-color: map-get($ecl-colors, 'grey-25');

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

.ecl-global-navigation__toggle {
  background-color: map-get($ecl-colors, 'grey-25');
  padding: map-get($ecl-spacing, 's') map-get($ecl-spacing, 'm') map-get($ecl-spacing, 'm');
}

.ecl-global-navigation__toggle-content {
  display: flex;
  flex-direction: column;
}

.ecl-global-navigation__institution-list {
  column-count: 1;
  list-style: none;
  margin: 0;
  margin-left:-(map-get($ecl-spacing, 'xxxs'));
  margin-right:-(map-get($ecl-spacing, 'xxxs'));
  order: 1;
  padding: 0;
}

.ecl-global-navigation__institution-item {
  display: inline-block;
  padding: 0 map-get($ecl-spacing, 'xxxs');
  width: 100%;
}

.ecl-global-navigation__institution-link {
  color: map-get($ecl-colors, 'grey-100');
  display: block;
  padding: map-get($ecl-spacing, 'xxs') 0;

  &:visited {
    color: map-get($ecl-colors, 'grey-100');
  }

  &:hover,
  &:focus {
    color: #000;
  }
}

.ecl-global-navigation__info {
  color: map-get($ecl-colors, 'grey-100');
  flex-grow: 1;
  font-weight: 600;
  order: 0;
  padding: map-get($ecl-spacing, 'xxs') 0;
}

/* Dark display */
.ecl-global-navigation--dark {
  background-color: map-get($ecl-colors, 'grey-100');

  .ecl-global-navigation__link {
    color: #fff;
  }

  .ecl-global-navigation__link:visited {
    color: #fff;
  }

  .ecl-global-navigation__link--institution {
    background-color: map-get($ecl-colors, 'grey-75');
  }

  .ecl-global-navigation__toggle {
    background-color: map-get($ecl-colors, 'grey-75');
  }

  .ecl-global-navigation__institution-link {
    color: #fff;
  }

  .ecl-global-navigation__institution-link:visited {
    color: #fff;
  }

  .ecl-global-navigation__institution-link:hover,
  .ecl-global-navigation__institution-link:focus {
    color: map-get($ecl-colors, 'grey-5');
  }

  .ecl-global-navigation__info {
    color: #fff;
  }
}

@include ecl-media-breakpoint-up(md) {
  .ecl-global-navigation__institution-list {
    column-count: 2;
  }

  .ecl-global-navigation__option {
    flex-grow: 0;
  }

  .ecl-global-navigation__info {
    order: 2;
  }
}

@include ecl-media-breakpoint-up(lg) {
  .ecl-global-navigation__institution-list {
    column-count: 3;
  }
}

@include ecl-media-breakpoint-up(xl) {
  .ecl-global-navigation__institution-list {
    column-count: 4;
  }
}
  • URL: /components/raw/eu-component-global-navigation/eu-component-global-navigation.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-global-navigation/eu-component-global-navigation.scss
  • Size: 3.6 KB
  • Handle: @ecl/eu-component-global-navigation--light
  • Tags: molecule
  • Variants (2): Light , Dark
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-global-navigation/eu-component-global-navigation.twig