Page structure

Language list

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
Anatomy of language list
  • Mandatory
  • Optional
ElementsMandatoryDescription
Icon + HeadingyesHeading indicating the required action accompanied by icon (translated in every language)
Language listyesList of the available languages
ButtonyesButton to close without making a selection
Active selectionyesCurrent 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