J3.x

Setup a Multilingual Site/Creating menus

< J3.x:Setup a Multilingual Site


Tutorial
How to setup a Multilingual Joomla! Site


Joomla! allows you to create easily a multilingual website, without having to install any third party extension. In this tutorial, you’ll find a complete walkthrough of the steps involved in creating a multilingual Joomla! site.



Step 5 - Creating menus for the multilingual content

Creating the 2 menus

It's now time to create a menu for each of the languages. We’ll need a menu pointing to the English articles and a separate menu pointing to the French articles.

  • Navigate to Menus  Manage  Add New Menu.
  • First create a menu for the French language articles:
    • Title: enter French Menu.
    • Menu Type: enter frenchmenu.
    • Description: enter a description, ie Menu for French content.
    • Click Save & Close.

J3.x-Multilingual-French-Menu-en.png

Now create another menu for the English language:

  • Title: enter English Menu.
  • Menu Type: enter englishmenu.
  • Description: enter a description, ie Menu for English content.
  • Click Save & Close to create this menu.

You’ve now got two sets of content and two menus, ready to be filled with menu items.

Adding menu items

The two new menus are still empty, so let's add a set of menu items to them.

  • Navigate to Menus  French Menu  Add New Menu Item.
  • Menu Item ype: Select the type Single Article.
  • Select the Article French Article 1.
  • Menu Title: Enter French Article 1.
  • Make sure the Menu Location is set to French Menu and the Language to Français.
  • Click Save & Close.

J3.x-Multilingual-French-Menu-Item-en.png

Repeat the actions described above until you’ve got your three menu items in the French Menu, each pointing to one of the three available French articles. Now navigate to Menus  English Menu and create three menu links pointing to the three English articles. To do this, repeat the actions above and change the details as needed.

Assigning language-specific homepages to the new menus

Your English and French menus both contain all necessary menu links. However, Joomla! needs to know what menu link in either of these menus should be the default link (the default homepage to be displayed for either the English site or the French site). Let’s set one of the menu items to be the default homepage for this language.

  • Navigate to Menus  Manage and click on English Menu to open it.
  • Click on the star in the Home column, next to the first article.

The star icon will be changed into an image of the British flag, indicating this is the default page for the English part of the site.

  • Navigate to Menus  French Menu and click the Home star next to the first French article. The star turns into a French flag.

J3.x-Multilingual-Menu-Set-to-Home-en.png

Connecting menu links to their translated counterparts

Although you have two sets of articles (original articles and their French "translations"), up to now there’s no connection between these articles. Joomla! has no way of knowing which French article is the translated alternative of a particular English menu item. Let’s associate the English menu items with their translations.

  • Navigate to "Menus  French Menu and click the first menu item to edit it (in our example, French Article 1 menu item).
  • Click on the tab Associations and open the English (UK) drop-down list. Select the appropriate English menu item: English Article 1.
  • Save & Close this menu item.

Repeat the previous steps to create associations for all three French menu items. Now, you should now have three Menu Items associated with French Menu Items. Note: Hover your mouse cursor over the EN icon to see the associated menu item.

J3.x-Multilingual-Menu-Associations-en.png

Finalizing the new menus by adding menu modules

Both new menus are now created, and menu links have been assigned to them. However, when you create a new menu in Joomla, you’ll need to add a menu module in order to be able to display the menu on the frontend of your site. Let’s do it!

  • Navigate to Menu  Manage
  • Click on Add a module for this menu type in the column Linked Modules. It will open a new Menu Module.
    J3.x-Multilingual-Add-Module-en.png
  • In the Modules:Menu screen, enter the following details:
    • Title: French Menu.
    • Language: Select Français (FR).
    • Position: Select position-7.
    • Click Save & Close.

J3.x-Multilingual-Menu-Module-en.png

Repeat the previous steps in order to create a Menu Module for the English, and of course, don't forget to change the details:

    • Title: English Menu.
    • Language: Select English (UK).
    • Position: Select position-7.
    • Click Save & Close.

Unpublishing the default Main Menu

Apart from our two new menus, the website also contains the Main Menu which is part of the Joomla! default setup. If you have installed Joomla! without sample data, this menu contains only a Home item. Even if our bilingual site will use the new English Menu and the new French Menu, Joomla! still needs this default Main Menu and its Home Item to be able to function. Joomla! also requires the Main Menu module to remain assigned to Language: All. As this Main Menu doesn’t need to be displayed on the site, we’ll unpublish the associated menu module:

  1. Navigate to Extensions  Modules, locate the Main Menu module and unpublish it.

The menus for the multilingual content are now set up. Just one more step to go: adding a language switcher module so that your users can select their prefered language.

Advertisement