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

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 to your site.
  • 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. 

  1. Add a menu for each language. In the top left, click on Add Elements > Menu. For this tutorial, select one of the horizontal menus. 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.

  2. To change the direction of each menu's tabs to either Left to Right or Right to Left, click Layout.

Tip: For languages that read Right to Left, you should also change the alignment of the text to right-aligned under Menu Layout > Text Alignment.

Coding the Redirection of Menu Tabs

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

  1. Open the Code panel.

    • Wix Studio: Click the on the left sidebar. The code editor appears at the bottom of the page. You can drag it up to adjust the size.
    • Wix Editor: If Dev mode is enabled, the code editor appears at the bottom of the page. You can drag it up to adjust the size.

  2. Copy the code below and paste it either in the page tab that has your menus, or in masterPage.js located in the Page Code section of the Code sidebar (Wix Studio), or the Velo sidebar (Wix Editor).

  3. 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.

  4. Preview or publish the page.

Copy

Understanding the Code

Line 1: Import the wix-window-frontend 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.

Was this helpful?
Yes
No