Build a locale switcher

When your site has multiple locales, you need a way for visitors to select the one that meets their needs. And that's where a locales list comes in. The locales list is a dynamic element that lists all the published locales as links to the localized version of the site, making it an easy way for visitors to switch between them. You can design a locales list in many ways, but a common example is to use a drop-down list in the navbar, which is exactly what we're going to build here.

So, in this lesson, we're going to add a locales list to our navbar. Then, we're going to add a dropdown element for that locales list. We're going to build and style the dropdown list. And finally, we're going to test it out on our live site by switching locales.

Okay. To add the locales list, we first need to make sure we're in our primary locale, in our case, the English one. And that's because you can only add new elements there. From here, let's double click to edit the navbar. Because it's a component, any changes here will affect all instances of this component. And then we'll go over to our Add panel and scroll down and find the locales list element. And once we do, we can drag it anywhere we want in the navbar. But for now, let's drag it right here next to the nav container. And that's it. We now have a list of all the published locales right here in our navbar.

But this is just a list and that doesn't really look right. So let's add a dropdown. The dropdown element is in the Add panel. But before we drag it in, we want to make sure we know where to drop it. So if you look over here in the navigator, you can see that we have a locales wrapper. We want to add the dropdown element inside the locales wrapper. So let's go to the Add panel, scroll down, and find the dropdown element. And using the navigator, we can drag it into the wrapper right here at the top above the locales list.

We have the locales list and the dropdown. Now it's time to combine them and build the dropdown list. First of all, we can change the text from dropdown to something more useful like language. And then we just need to make sure we translate that in all our secondary locales by switching and right-clicking to translate that text box on each locale.

Next up, we want to put the list inside the dropdown. Here in the navigator, you can see the structure of the dropdown element. And inside the navigation, there are three dropdown links by default. We don't need those. So, let's delete them. And back in the navigator, we can drag the locales list into the navigation. And just like that, the list has disappeared from the canvas. So, what just happened? Well, now it's inside the dropdown. So, with our dropdown element selected, we can head over to the settings over here on the right side, and we'll set the dropdown menu to show. Now, we can see the list, and it's hideous. But that's okay. We'll quickly clean up everything with the power of post-production. Much better.

We finished building the locale switcher, and it's styled to match the site design. Now, with the locale wrapper selected, all I need to do is to drag it right here next to these buttons. So, we've built our locale switcher. Now, let's test it by switching locales on the site itself.

The first thing I need to do is to publish the site. Once it's published, if we open up the site, we can see the new locale switcher is there in the navbar. I'll click in and select my favorite language. And sure enough, it takes me to that landing page. But that's not all. This applies to all pages across the site. The switcher takes you to the localized version of whatever page you're on.

Remember the locales list contains all published locales. So if you ever want to add new locales, all you need to do is enable publishing in the localization settings and that locale will appear automatically in the list. And if you want to remove a locale from the list, all you need to do is disable it.

But that's it. Let's recap what we did here. We added a locales list to our navbar. Then we added a dropdown menu for that locale list. We built and styled the dropdown list inside that menu. And finally, we tested it by switching locale on the site itself. That's building a dropdown locale switcher in Webflow.