Europa Component Library

Site switchers: Default

Documentation • Demo

Site switcher

Why and how to use this component

Users need a way to easily navigate between the European Commission’s two sites; ‘Commission and its priorities’ and ‘Policies, information and services’. The solution is a site switcher - two prominent buttons that allow for navigation between the homepages of the two sites.

When to use this component

  • on every page of every Commission website.
Site switcher
Transformed sites + Improved sites
Mandatory component 
{#
  - "variant": can be '', 'header', 'footer' (default: '')
  - "political":  {
    - "href": target of the link (default: '')
    - "label": label of the link (default: '')
    - "is_active" (boolean): set active link

  }
  - "info":  {
    - "href": target of the link (default: '')
    - "label": label of the link (default: '')
    - "is_active" (boolean): set active link
  }
  - "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 _css_class = 'ecl-site-switcher' ~ (variant != '' ? ' ecl-site-switcher--' ~ variant: '') %}
{% set _extra_attributes = '' %}

{# 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 #}
<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <ul class="ecl-site-switcher__list ecl-container">
    <li class="ecl-site-switcher__option{{ political.is_active ? ' ecl-site-switcher__option--is-selected' : '' }}">
      {% include '@ec-europa/ecl-links' with {
        'extra_classes': 'ecl-site-switcher__link',
        }|merge(political)
      %}
    </li>
    <li class="ecl-site-switcher__option{{ info.is_active ? ' ecl-site-switcher__option--is-selected' : '' }}">
      {% include '@ec-europa/ecl-links' with {
        'extra_classes': 'ecl-site-switcher__link',
        }|merge(info)
      %}
    </li>
  </ul>
</div>
 
{
  "political": {
    "href": "#",
    "label": "Commission and its priorities"
  },
  "info": {
    "href": "#",
    "label": "Policies, information and services",
    "is_active": true
  }
}
 
<div class="ecl-site-switcher ecl-site-switcher--">
  <ul class="ecl-site-switcher__list ecl-container">
    <li class="ecl-site-switcher__option">

      <a class="ecl-link 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-site-switcher__link" href="#">Policies, information and services</a>
    </li>
  </ul>
</div>
  • Content: 
    /**
* Site switcher component
* @define site-switcher
*/

.ecl-site-switcher {
  @include ecl-hidden-print();

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

  &::after {
    clear: both;
    content: '';
    display: block;
  }
}

.ecl-site-switcher__link {
  display: block;
  font-weight: bold;
  line-height: 1.3;
  padding: map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'm');
  text-decoration: none;
  width: 100%;

  &::after,
  &--is-external::after {
    content: none !important;
  }

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

.ecl-site-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecl-site-switcher__option {
  display: inline-block;
  float: left;
  text-align: center;
  vertical-align: middle;
  width: 50%;
}

.ecl-site-switcher__option--is-selected {
  background-color: map-get($ecl-colors, 'blue-100');

  .ecl-site-switcher__link {
    color: #fff;
  }
}

.ecl-site-switcher--header,
.ecl-site-switcher--footer {
  border-bottom: 1px solid map-get($ecl-colors, 'grey-5');
}

.ecl-site-switcher--footer .ecl-site-switcher__option,
.ecl-site-switcher--header .ecl-site-switcher__option {
  position: relative;

  &--is-selected::after {
    border: 10px solid rgba(0, 68, 148, 0);
    content: ' ' !important;
    height: 0;
    left: 50%;
    margin-left: -10px;
    pointer-events: none;
    position: absolute;
    width: 0;
  }
}

.ecl-site-switcher--header .ecl-site-switcher__option {
  &--is-selected::after {
    border-top-color: map-get($ecl-colors, 'blue-100');
    top: 95%;
  }
}

.ecl-site-switcher--footer .ecl-site-switcher__option {
  &--is-selected::after {
    border-bottom-color: map-get($ecl-colors, 'blue-100');
    bottom: 95%;
  }
}

@include ecl-media-breakpoint-up(md) {
  .ecl-site-switcher__option {
    width: auto;
  }

  .ecl-site-switcher--footer {
    .ecl-site-switcher__list {
      float: right;
    }
  }
}
  • URL: /components/raw/ecl-site-switchers/ecl-site-switchers.scss
  • Filesystem Path: framework/components/ecl-site-switchers/ecl-site-switchers.scss
  • Size: 2 KB