Monday, October 12, 20269:40 AMETLondon2:40 PMDubai5:40 PMTokyo10:40 PMSydney12:40 AMLos Angeles6:40 AM57°FNew YorkNewsletter

Language Switcher

Language menus for multilingual sites.

On this page

The classic dropdown, done properly
28 languages, one calm screen
Two languages? One switch
Show every option at once
Quiet controls for reading sites

WANDER & CO. · EN

Welcome

Find your next adventure with us.

Explore trips

Pick a language on the right — the card switches in place (preview mode). Wander & Co. is fictional.

Dropdown · glass

Segmented · glass

Round flags

TRAVEL AGENCY · HEADER DROPDOWN

Native name with the English name under it, a search box and languages grouped by region — so a visitor finds “Deutsch” even if they type “german”.

dropdownnative + English namesearchregion groupsmenu aligned right

Wander & Co.DestinationsToursDealsJournal

Try typing “jap”, “ह” or “german” in the search. Wander & Co. is fictional.

GLOBAL SAAS · SEARCH MODAL

For products in many markets: a globe button opens a full modal with a search box and tiles grouped by region. Esc closes it and the keyboard focus stays inside.

modalglobe buttontiles by regionfocus trapdark skin

Metricly is a fictional product.

BILINGUAL CAFÉ · TOGGLE

When a site has exactly two languages, a sliding toggle is quicker than any menu. Flip it and the menu card changes between English and বাংলা.

bilingual togglelarge sizenames or codesspring animation

Englishবাংলা

ENBN

Cha & Crumb is a fictional café; prices are examples.

HOTEL BOOKING · FLAGS & PILLS

Guests from many countries recognize their flag first. Round flags show the language name on hover; pills show both the flag and the name.

round flagshover namespillsgradient current

Round flags · large

Pills · rounded flags

Pills · code only

Pills · emoji flags + name

Emoji flags depend on the device (Windows shows letters) — the built-in SVG flags always look the same.

DOCUMENTATION · SEGMENTED & LIST

A segmented control with a sliding highlight sits nicely above an article; the vertical list suits a sidebar or a settings page.

segmentedsliding highlightvertical listminimal & outline

Segmented · codes

Segmented · flags + names · gradient

Inline links

Vertical list · native + English

MOBILE APP LANDING · GLOBE POPOVER

The globe button stays tiny in a busy header; the popover opens in two columns with a title and search. Neon skin for a dark launch page, opening on hover.

globe popover2 columnshover openneon skin

PulseFeaturesDownloadSupport

App language

Pulse is a fictional app.

ONLINE STORE · FOOTER

In the footer the menu opens upwards. The native select uses the phone’s own picker — the most familiar control on mobile.

opens upwardsnative selectinline linksdark

Northwind Goods

Warm things for slow evenings. Shipping to 30 countries.

Dropdown · opens up

Native select

Inline

Northwind Goods is a fictional shop.

8 SKINS

Same dropdown, eight skins. Outline and minimal take the color of the text around them.

lightoutlineminimalsoftdarkglassgradientneon

BROWSER LANGUAGE · SUGGESTION

If the visitor’s browser prefers another language from your list, a small bar at the bottom offers to switch — no forced redirects. Closing it is remembered.

reads browser languagesno forced redirectdismiss remembered

On this page the suggestion is forced to বাংলা so you can see it — look at the bottom of the screen.

NO MULTILINGUAL PLUGIN? · GOOGLE TRANSLATE

Google Translate mode machine-translates the whole page in the browser. Google’s script loads only after someone picks a language. Pick English to go back.

real — try itloads on demandno plugin neededhides Google’s bar