EU System

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 
{#
  Parameters:
    - "variant" (string) (default: ''): can be '', 'header', 'footer'
    - "political" (object):  {
      - "href" (default: '')
      - "label" (default: '')
      - "is_active" (boolean) (default: false)
    }
    - "info" (object):  {
      - "href" (default: '')
      - "label" (default: '')
      - "is_active" (boolean) (default: false)
    }
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-site-switcher' with {
  'variant': variant|default(''),
  'political': {
    'href': '',
    'label': '',
    'is_active': false
  }|merge(political|default({})),
  'info': {
    'href': '',
    'label': '',
    'is_active': false
  }|merge(info|default({})),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'eu'
} only %}
 
{
  "political": {
    "href": "../../example.html#",
    "label": "Commission and its priorities"
  },
  "info": {
    "href": "../../example.html#",
    "label": "Policies, information and services",
    "is_active": true
  }
}
 
<div class="ecl-site-switcher">
  <div class="ecl-container">
    <ul class="ecl-site-switcher__list">
      <li class="ecl-site-switcher__option">

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

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-site-switcher/generic-component-site-switcher';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-layout-grid', 'eu-component-link'));

// Use generic mixin
@include exports('eu-component-site-switcher') {
  @include ecl-site-switcher();
}
  • URL: /components/raw/eu-component-site-switcher/eu-component-site-switcher.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-site-switcher/eu-component-site-switcher.scss
  • Size: 434 Bytes