Velo Tutorial: Changing the Direction of Menu Tabs Based on the Current Language

Visit the Velo by Wix website to onboard and continue learning.

Note:

This tutorial demonstrates how to use Velo to show and hide different menus in a multilingual site, based on the currently selected language. However, you can use the instructions in this tutorial to customize your page's layout and show or hide any other elements as well, based on the currently selected language.

You can use Velo to display menu tabs either "right-to-left" or 'left-to-right" based on the selected language. Site visitors select the language from a language selector dropdown.

For example, choosing a language that is read from right-to-left, such as Hebrew, displays the menu options from the right to the left. In the example below, ״צור קשר״ is displayed on the left of the menu, even though in English, it means "Contact Us," which is displayed on the right. This shows that the order of the tabs is based on the language selection.

This tutorial has 2 parts:

Instructions for adding menus and ordering menu tabs in the Wix Editor.
Instructions on how to set up code you can copy and paste onto your page or site, including an explanation of what each line of code does.

This tutorial assumes you enabled Wix Multilingual on your site, and set up the languages you need.

Adding Menus for Each Language

We will add a menu for each language.

To best demonstrate how tab direction works, this tutorial adds horizontal menus. These menus are usually placed in the header or footer of a site.

In the Wix Editor, add menus for each language.

You can place one menu element on top of the others, or have menu elements overlap, because we are going to display only one menu at a time.
Change the direction of each menu's tabs to either Left to Right or Right to Left.

Tip:

For languages that read Right to Left, also change the text alignment under How's text aligned? to right-aligned:

The sample code below checks the language the user selected using Wix Multilingual's language selector dropdown element and then shows only the menu in the correct language with the correctly-ordered tabs. All other menus are hidden.

Instructions

Open the Code panel (you can just drag it up from the bottom).
Copy the code below and paste it either in the page tab that has your menus, or in masterPage.js in the Page Code section of the Velo sidebar. (masterPage.js contains site code, which affects every page in your site.)
In the code, make sure to substitute your own menu IDs from the Properties & Events panel (you can hover over the element to see the ID) and the language codes used on your site.
Preview or publish the page.

1import wixWindow from 'wix-window';
2$w.onReady(function () {
3  let myLang = wixWindow.multilingual.currentLanguage; 
4  if (myLang === 'he') {
5    $w('#LTREnglishMenu').hide();
6    $w('#RTLHebrewMenu').show();
7  } else {
8    $w('#RTLHebrewMenu').hide();
9    $w('#LTREnglishMenu').show();
10  };
11});

Understanding the Code

Line 1: Import the wix-window API for Wix Multilingual.
Line 2: Add your code to the onReady() function to make sure all elements are loaded and available.
Line 3: Use the currentLanguage property to determine what language the site visitor chose from the language selector.
Lines 4-6: If the language is Hebrew, show the Hebrew menu, with tabs ordered from right-to-left.
Lines 7-9: If the language is not Hebrew, show the English menu, with tabs ordered from left-to-right.

Adding Menus for Each Language

Coding the Redirection of Menu Tabs

Instructions

Understanding the Code

Did this help?