Footer Locale & Currency Switcher — Free Snippet

Global products need a place to let a visitor pick their language and their currency without leaving the page, and the footer is the conventional home for that control — out of the way of primary navigation, but always reachable from anywhere on the site. This snippet builds two independent dropdown pickers styled as compact footer buttons, each opening a popover menu upward (since footer dropdowns near the bottom of the viewport have nowhere to open downward), and wires the currency picker to actually recompute a sample price so the interaction feels real rather than decorative.

Two independent popovers, one shared open/close mechanism

Both pickers — language and currency — are built from the same wirePicker(rootId, btnId, menuId, onSelect) function, called twice with different element ids and a different onSelect callback. Clicking a button toggles its own .fls-picker.open class after first calling closeAll(), so opening one picker always closes the other — a small but important detail, since two open dropdowns stacked in a footer row would overlap and confuse the eye. A document level click listener and an Escape keydown listener both call the same closeAll(), covering the two most common ways users expect a popover to dismiss: clicking elsewhere or pressing escape.

Opening upward, not downward

The .fls-menu is positioned with bottom: calc(100% + 8px) rather than top, anchoring it above the trigger button. This is the detail that makes it a genuine footer component rather than a generic dropdown dropped into a footer: a footer sits at the very bottom of the viewport, so a menu that opened downward would frequently render off-screen or get clipped by the page boundary. Opening upward is the correct default for any control positioned in the last 100px of a page.

A currency conversion that actually runs

Selecting a language option is cosmetic — it swaps the flag and label text on the button. Selecting a currency option is not: each <li> carries a data-rate and data-sym attribute, and the onSelect callback multiplies the base priceUSD (29) by the selected rate, rounds it, and writes the new symbol and amount into the sample price on the page, along with a brief color flash so the change registers as a live update rather than a silent DOM mutation. This demonstrates the full flow a real implementation would need: a rate table, a selection handler, and a re-render of every price on the page — here scoped to one element for clarity.

Accessible listbox semantics

Each button carries aria-haspopup="listbox" and toggles aria-expanded, and each menu uses role="listbox" with role="option" list items, so assistive technology announces the control as a genuine picker rather than a plain link list. The hidden attribute — not just a CSS class — is toggled on the menu, which keeps it out of the accessibility tree entirely when closed, not merely visually hidden.

Extending it for production

Wire the language selection to your i18n library's locale-switch function (e.g. reload the page with a ?lang= query param, or call i18n.changeLanguage() in a React app) and drive every price on the page — not just the sample — from a shared currency-rate store so the whole storefront updates in sync. The rate table here is hardcoded for demonstration; in production it should come from a live exchange-rate API refreshed periodically, since currency rates that are even a day stale can meaningfully mislead international customers on price.