Locales List Styling without dropdown

Design help Design inspiration
1

Hello

I’m looking for a way to better style the locales list without using a dropdown. I want the visitor just to choose between languages, without the useless dropdown. So I just put the locales list in the navbar, which works technically, but now i can’t find a way to have the two languages side by side. I want the language names to be side by side, just like the the old dropdown switcher on the far right in the navbar: De | En . Can anyone help me with this?

2

The Locales List element is not a dropdown.

You can combine it with a dropdown if you want, but the list itself is just a collection list-style list.

You can just drop it on your page, set the middle list element to flex horizontal 1rem spacing, and you’ve got a horizontal locale selector.

3

This works, but how do I insert the “|” between the languages? It should look like this: De | En, with the current language highlighted. Thank you for the help!

4

That’s trickier;
Here are 4 approaches for your situation.

  1. Add a right-side border on your locale item, plus custom CSS to suppress the border on the last item with CSS :last-child()
  2. Use CSS :after to append the | pipe delim character to every item except the last one, resembling this rule;
.item:not(:last-child)::after {
    content: " |";
}
  1. Create two switchers, and use CSS to suppress all options except the relevant one. That way you can place one item at a time.
  2. Use one locale switcher only, and hide it. Create your own UX and use JS to trigger the locale switcher.

I used approach #4 last week to create this;

image

I tend to go the JS approach for controller UX’s because it gives me the most control on when and how things happen.

You’ve given me an interesting idea though- I’m evolving an attributes-based controller pattern in my SA5 Elements library, to support attributes-based button-controllers for tabs, sliders, and accordions. I should be able to expand that in the future to cover other elements such as the Locale Switcher.

I’ll give that some thought when I have time.

1 Like
5

thank you, i had to find another way. Too complex for me.