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 %}
{
"variant": "footer",
"political": {
"href": "../../example.html#",
"label": "Commission and its priorities",
"variant": null
},
"info": {
"href": "../../example.html#",
"label": "Policies, information and services",
"is_active": true,
"variant": null
}
}
<div class="ecl-site-switcher ecl-site-switcher--footer">
<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