The Language switcher is a language selector of the European Commission that users can access on every page, through an overlay. This can accommodate for both official & non-official EU languages.
Anatomy
Default
| Elements | Mandatory desktop | Mandatory mobile | Description |
|---|
| icon + legend | yes | yes | heading indicating the required action accompanied by icon (translated in every language) |
| heading | yes | yes | the heading of the group of related list items |
| language list | yes | yes | list of the available languages |
| button | yes | yes | button to close without making a selection |
| active selection | yes | yes | current language selection |
Conditional
| Elements | Mandatory desktop | Mandatory mobile | Description |
|---|
| heading | yes | yes | the heading of the group of related list items |
| non-EU languages list | yes | yes | additional container that lists the non-EU languages available for a given page or site |
Do's
- match the label of the language with the selected language
- display only the languages in which the content has been translated in and is available
Don'ts
- don't display languages as options in the language list if they are not available on your site
When to use
- this is a site-wide component and thus it must be available on every page in case users want to switch languages
When not to use
- should be used on every page
Language splash page
The Language Splash page is a language selector of the European Commission that users are presented with upon entering the website. This can accommodate for both official & non-official EU languages.
Anatomy
Default
| Elements | Mandatory desktop | Mandatory mobile | Description |
|---|
| heading | yes | yes | heading indicating type of list (translated in every language) |
| language list | yes | yes | list of the available languages |
| button | yes | yes | button to close without making a selection |
| active selection | yes | yes | current language selection |
Conditional
| Elements | Mandatory desktop | Mandatory mobile | Description |
|---|
| heading | yes | yes | the heading of the group of related list items |
| non-EU languages list | yes | yes | additional container that lists the non-EU languages available for a given page or site |
Do's
- match the label of the language with the selected language
- display only the languages in which the content has been translated in and is available
Don'ts
- don't display languages as options in the language list if they are not available on your site
When to use
- this is a site-wide component and thus it must be available on entry point, indicating the available languages
When not to use
- should be used on every page
