The Language List is the language selector of the European Commission sites. Users are presented with the language list when they first access the site, or through the language switcher at the top-right corner of any page.
Anatomy
There are 2 versions of the component. One version is shown initially when a user arrives at the site. The second version is for a user to switch their language preference.
- desktop is a 2 column layout which displays the available language choices
- mobile design is a single column layout which allows the user to scroll to select their language
- Mandatory
- Optional
| Elements | Mandatory | Description |
|---|---|---|
| Icon + Heading | yes | Heading indicating the required action accompanied by icon (translated in every language) |
| Language list | yes | List of the available languages |
| Button | yes | Button to close without making a selection |
| Active selection | yes | Current language selection |
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
- indicate current language
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 their language preference
When not to use
- should be used on every page