Language Switcher Dropdown
Provides a dropdown select element for language switching instead of the default hyperlinks, with support for multiple JavaScript widget libraries and customizable skins.
lang_dropdown
Install
composer require 'drupal/lang_dropdown:8.x-2.4'
composer require 'drupal/lang_dropdown:8.x-2.0'
Overview
Language Switcher Dropdown is a module that exposes a new block similar to the default Language Switcher block provided by Drupal core's Language module. Instead of using hyperlinks, site visitors can switch languages using a drop-down select list.
The module provides four different output widget types: Simple HTML select, Marghoob Suleman Dropdown (ms-Dropdown), Chosen, and ddSlick. Each widget type comes with its own set of configuration options including various pre-built skins and support for custom skins.
The module integrates seamlessly with the Language Icons module to display country flags alongside language names. Additionally, administrators can configure which languages are visible to specific user roles, providing granular control over the language switching experience.
Features
- Provides a language switcher block with dropdown select instead of hyperlinks for better UX
- Four widget output types: Simple HTML select, Marghoob Suleman Dropdown (ms-Dropdown), Chosen library, and ddSlick library
- Multiple pre-built skins for ms-Dropdown (Default, Dark, Blue) and ddSlick (Default, Dark, Blue) widgets with variants for icon positioning
- Support for custom CSS skins for both ms-Dropdown and ddSlick widgets
- Integration with Language Icons module to display country flags in the dropdown
- Four display format options: Translated into Current Language, Language Native Name, Language Code, Translated into Target Language
- Option to show all enabled languages or only languages with available translations
- Option to hide the switcher when only one translation is available
- Option to redirect to homepage on language switch
- Configurable dropdown width in pixels
- Role-based language hiding: hide specific languages from specific user roles
- Graceful JavaScript fallback with noscript support for form submission
- Cache context aware for proper caching with language, user roles, URL path, and query arguments
Use Cases
Basic multilingual site language switcher
Place the Language dropdown switcher block in your site's header or sidebar region. Configure it with 'Language Native Name' display format and 'Simple HTML select' widget for a clean, accessible language switcher that works without JavaScript libraries.
Visually enhanced language switcher with flags
Install the Language Icons module and either the MS Dropdown or ddSlick library. Configure the block to use one of these widgets to display an attractive dropdown with country flags next to each language option.
Hiding languages for anonymous users
Use the 'Hide language settings' section in block configuration to hide certain languages (e.g., draft translations) from anonymous users while keeping them visible to authenticated users or administrators.
Content translation language switcher
Enable the 'Hide if only one language is available' option and disable 'Show all enabled languages' to create a language switcher that only appears when the current content has multiple translations, showing only available translations.
Custom branded language dropdown
Create a custom CSS skin file following the provided sample files (ldsCustom.css.sample or ddsCustom.css.sample), place it in the appropriate library folder, and select 'Custom skin' in the block configuration to match your site's design.
Tips
- Download external libraries (ms-Dropdown, Chosen, ddSlick) to the libraries folder at the Drupal root for enhanced dropdown widgets
- Use the Language Icons module to display country flags in your language dropdown
- The 'Translated into Target Language' display option shows each language name in that language itself (e.g., Français for French)
- Create custom skins by copying the sample CSS files and modifying them to match your theme
- Enable 'Hide if only one language is available' to prevent showing a useless single-option dropdown on non-translated content
- The module provides different blocks for different language types (Interface, Content) when multiple language types are configured
- For sites using session-based language negotiation, the dropdown correctly reflects the session-selected language
Technical Details
Admin Pages 1
/admin/structure/block
Place and configure the Language dropdown switcher block. The block configuration form provides all settings for customizing the language dropdown behavior and appearance.
Hooks 1
hook_help
Provides help text for the module on the help page, including instructions for creating custom skins for both MS Dropdown and ddSlick widgets.
Troubleshooting 4
This was addressed in a recent update (Issue #3524882). Ensure you are using the latest version of the module. The fix improved cache context handling for proper caching with language, user roles, URL path, and query arguments.
These widget types require their respective JavaScript libraries to be installed. Download the libraries and extract them to the libraries folder: libraries/ms-dropdown, libraries/chosen, or libraries/ddslick.
Install and enable the Language Icons module. For MS Dropdown and ddSlick widgets, flags will appear in each option. For Simple HTML select, configure the flag position in the block settings.
Ensure your custom CSS file is placed in the correct library folder and named correctly. The CSS class name in your file must match the custom skin name entered in the block configuration.