Setting up multilingual menus in D7

Here are the prerequisite for this article:

  • A fresh & properly installed multilingual D7 website with Path prefix language code (e.g. "/en", "/fr", etc.).
  • An enabled Language switcher block. To configure this block, go to  en/admin/structure/block.

If you need help setting up your website, perhaps you should first read How to setup a multilingual website with Drupal 7.

What I'll be covering in this article is how to create English-French bilingual menus. I'll be working from the English interface of my website. That's why you'll see a language prefix in each of the given URL (i.e. "en/...").

Alright, let's go!

  • Make sure i18n (Internationalization) modules are enabled. I've enabled all of the i18n modules except Multilingual forum (I don't have any forums).
  • Make sure the Variable module is enabled.
  • Goto en/admin/config/regional/i18n/variable, select the Source for the Main links in the list of variables to be translated & save the configuration. More about this a little later.

Now we need to create 2 custom menus: one for English and one for French. Note, we don't need & will not use the Main menu.

  • Goto en/admin/structure/menu/add and create the English menu
  • Title: MAIN ENGLISH MENU
  • Multilingual options: Fixed Language.
  • Language selector: English
  • Save

Repeat the procedure and create the French menu

  • Goto en/admin/structure/menu/add and create the French menu
  • Title: MAIN FRENCH MENU
  • Multilingual options: Fixed Language
  • Language selector: French
  • Save

Back at en/admin/structure/menu, you should now see the following

  •  Main menu
  •  Management
  •  MAIN ENGLISH MENU
  •  MAIN FRENCH MENU
  •  Navigation
  •  User menu

Now we need to tell Drupal to bypass the Main menu which is enabled by default and, instead, use the custom menus we've just created.

Click on the Settings tab or go to en/admin/structure/menu/settings.

Look at the Source for the Main links selector. The 6 menus listed above should all appear as options in the drop down menu. Take a few seconds to read the help text that appears underneath this selector. Note the This is a multilingual variable which appears in bold. This is the direct result of the configuration we did at en/admin/config/regional/i18n/variable. What it means is that the selection for Source for the Main links applies ONLY to the current interface. In other words, if you are in the English interface of your website (look for the "/en/" in the URL), the selection you're about to make & save will only apply to the English pages. So to set the Source for the main links for French pages, you must first switch to the French interface.

Make sure you fully understand this notion of multilingual variable otherwise you will likely run into trouble later on.

Assuming you are, as I am, on the English interface of your website

  • Go to en/admin/structure/menu/settings
  • set Source for the Main links to MAIN ENGLISH MENU
  • Save the configuration.

Repeat for French. Remember, that means you first have to switch to the French interface.

  •  Go to fr/admin/structure/menu/settings
  •  Set Source for the Main links to MAIN FRENCH MENU.
  •  Save the configuration.

Now we need to add menu items, right? We need to populate MAIN ENGLISH MENU and MAIN FRENCH MENU.

Since we're working from a fresh D7 install, I'm assuming your default home page is something like "example.com/en". You can check this out by going to en/admin/config/system/site-information. In the Default front page field, you should see node. That's the Drupal 7 installer default home page.

Adding the Home menu item:

  • Go to en/admin/structure/menu and click list links for MAIN ENGLISH MENU.
  • Then, click Add link.

Here are the settings for the Home menu:

  • Menu link title: Home
  • Path: <front>
  • [√] Enabled
  • Parent link: MAIN ENGLISH MENU
  • Save

Repeat for French

  • Go to en/admin/structure/menu and this time click list links for MAIN FRENCH MENU.
  • Click Add link.
  • Menu link title: Accueil
  • Path: <front>
  • [√] Enabled
  • Parent link: MAIN FRENCH MENU
  • Save

That should do it. Go to your home page and try using the Languages block to switch from one language to another.

This is the way menus are setup on my website. Note that, at the time of writing this article, there are 5 French menus and only 3 English menus.

For the Contact menu on d7One, I fist added a category (en/admin/structure/contact). And then created menu items in MAIN ENGLISH MENU and MAIN FRENCH MENU. In my case, both menu items have the same name (Contact) and path (contact). The only difference being the Parent link for the English Contact menu is set to MAIN ENGLISH MENU. The Parent link for the French Contact menu is set to MAIN FRENCH MENU.

Voilà. Hope this helps. Questions & comments welcome.

Update: Oct. 26 2011

When you create an Article, if the custom menus we've just created (MAIN MENU FRENCH and MAIN MENU ENGLISH) are not listed in the drop down menu Parent item which appears when you click Provide a menu link in the Menu settings tabs, then you need to edit the Article content type.

  • go to admin/structure/types/manage/article
  • click on the Menu settings tab
  • make sure the Available menus options for MAIN MENU FRENCH and MAIN MENU ENGLISH are checked
  • don't forget to save

Thanks to bobafett for asking, Luca Barbetti for answering and Jupiter for suggesting this update.

Comments

Hi
just confuse about structure directory en and fr and Add link .
Could you give source code and configure for Setting up multilingual menus in D7 ?

Thank you
Tai

Hey Tai,

Go to admin/config/regional/i18n/variable and make sure that the variable Source for the Main links is checked and therefore designated as a multilingual variable. I forgot to mention this important setting. Apologies! I've updated my article with more details. Let me know if it helps.

As far as we exclude very complex technical documentation and articles, your practical step by step tutorial about multilingual settings in drupal is absolutely the best I've ever seen in the web.
Thanks

And thanks for your kind words.

Great, just what i was looking to do.
Thank you!!

Do you know how to have the correct menu (in the node language) choosed when you are adding a new node in the "Menu Settings / Provide a Menu link" option?
Thank you

Hey bobafett,

The best way to add a new menu is to first create the node (e.g. an "About me" page in English). In the page node/add form, check the "Provide a menu link" checkbox. Enter a "Menu link title". Then in "Parent item", tell Drupal where this menu should be displayed. It should go somewhere under MAIN MENU ENGLISH. When you create the French translation, make sure this option is set to MAIN MENU FRENCH. Once your new node is saved, you can set your new menu's position in the menu tree by going to the admin menu interface (admin/structure/menu).

Thank you for your quick response,
So to add the translated node to the French menu I will have to go to the admin menu interface because the MAIN MENU FRENCH will not be displayed in the node/add form.

Hi, I think you have to edit the content type, e.g. article in admin/structure/types/manage/article, and in menu settings to select the corresponding available menu (there you should see all the MAIN MENUs you have created).

If MAIN MENU FRENCH won't display in the "Parent item" drop down of a node form, then something is wrong. I suggest you go back to the beginning of the article and - slowly - make your way down. You know what they say, the devil is in the details !

You saved my holidays! :)

I think you did a great job and I thank you for sharing and explaining it in such a clear manner. I've tried to build a nested multingual main menu (superfish) using the translate tabs in content and menu items editing, selecting carefully paths and parent links. The best I've got so far is multilingual main menu with few items but no child items, which is not what I wanted. Either I'm missing something or it's not possible to have one multilingual main menu. What do you think about it?
Cheers

Thanks for this very clear, efficient and concise tutorial!

Can I suggest adding to the main text the part about making sure the menu is available to the content type? I just figured this out on my own before reading the comments, and was about to post the discovery here when I finally read all the comments and saw others were stumped by this detail.

Best regards,
jM

Hey Jupiter, thanks for the kind words & suggestion. I've added an update at the bottom of the article. Hope it clears things out.

Cheers!

Thank you for the very useful tutorial. Do you think you could give me a hint what changes need to be done to it to make it work with two domains, one for each language? I've tried to follow it for setting it up for two different domains but it doesn't seem to work - when I choose source for main links in en/admin/structure/menu/settings i get only one menus to appear, only in English. If I open the fr/admin/structure/menu/settings for the 2nd language to check I find it is set to English. If I change it now back to French and open fr/admin/structure/menu/settings to see which language is set there I find it is French. Maybe you have a

Hi weba. I'm not sure I fully understand where you're going with the 2 domains. About the problems you write about in the third paragraph:

  • Make sure the Multilingual settings at admin/config/regional/i18n/variable are set properly
  • Read the update at the bottom of the article and make sure content types are properly setup

Great guide!! I want to ask something. I use the admin language module which force the admin section of the site to stay in a language no matter suffix the url has. (en or fr..) and i did that because my client doesn't know france, just english. The problem is that if I visit the MAIN FRENCH MENU menu i won't see the links for this menu until i disable admin language module. In other words. In order to see the links for each menu in the admin area i need to switch the whole site to the language i want the translation. I hope it makes sense. sorry for my english

How should one proceed with View that generate a Menu Item for a page? I assume you only need to create a single view for displaying content and set the language filter to "Current language". What about the menu item itself and the path? - the i18nviews interface does not seem to give option to create a translated menu set. Should we then manually create a translated menu item(s) and bind them into a set? What is the correct way?

Hello Artur. Yes a single view with content negotiation will do. The path is set in the 'Page' display. That's it for Views. Then from the menu UI simply add a menu item to each of your custom menus using that path and you're done.

I have cereated two menus for english Home and french home ,But i selected the language english its showing only one english home menus only why not showing french home menus in menu bar...

Dear:
BEFORE "Adding the Home menu item:"
IN XX/admin/config/system/site-information.
I WNAT TO SET Home's Page for each language.

1.I set en and zh-hant ,2 Language.
2.I set 2 menu for 2 language to the the home.
Menu_en:en's home menu
Menu_tw:zh-hant's Home Menu
3.I add 2 article ,want to join 2 language.
node17 :
language:English
publish option: published
menu Setting:no
node18 :
language:Chinese
publish option: published
menu Setting:no
4.IN XX/admin/config/system/site-information.
Default front page:
IN CHONESE:I WANT TO SET:node/19 -->SAVE
IN ENGLISG :I WANT TO SET:node/20 -->SAVE
BUT,IT FINALLY SET THE DEFAULT HOME PAGE AS NODE/20
IT means ,it can set on page for the site's home page?

I had try switch
en/admin/config/system/site-information.
zh-hant/admin/config/system/site-information.

It also use lasted set for the page.

Q1.HOw can I use node19 for Chonese's HOme page
node20 for Englisg's Home Page.

BY the way,ih the
en/admin/config/system/site-information.
IT has :
THERE ARE MULTILINGUAL VARIABLES IN THIS FORM
Check you are editing the variables for the right Language value or select the desired Language.
Chinese, Traditional | English

does it just show "VARIABLES IN THIS FORM",OR I can change language by click it showed.

THX

Hi 'baseball', I wrote an article that explains how to set up a multilingual home page in D7. Did you read it? I think it will answer your question. Cheers.

Hi, I've read your tutorial hoping it would solve my problem. I've setup a multingual website just as you covered but when I modify content in another language then the current admin-language,it disbles the menu-item. In the dropdown for Parent item all other languages can be selected but it states (disabled). Could you give any advice on how to solve this? Kind regards, Viktor

When a menu's Multilingual options is set to Fixed Language as it is the case in the present tutorial (you can see this at admin/structure/menu/manage/menu-main-english-menu/edit), "Menu items will have a global language and they will only show up for pages in that language."

In other words, when the language of an Article is set to French, the English menu items listed in the node/edit form are logically labeled as "(disabled)". In other words, you cannot provide a menu item for a French page in the Main English Menu when that menu is set to Fixed Language.

But my situation is as follows. I'm editing (for example) a French page, while logged in as Dutch user (ie no prefix for admin like '.../fr/admin/...'. I can see the French menu in the Parent dropdown, but all children have '(disabled)" appended. When is save the page, the menu item disappears from the French menu. It is disabled. That's not expected behviour in my opninion?

but I still get the same old menu on both languages.. also I'm wondering why create a new english menu when it already exists?

Thank you very much, merci beaucoup, muchas gracias! It works!!!

Hello, I love your tutorial , but can't get it to work for me. Wh I selected the Source for the Main links in the list of variables to be translated, but when I try and create a menu it is missing the "Multilingual options" configuration for the menu. Everyone says this should be available, but it is not. To try and get around this I translated the menu items as strings from my translation manager, but even then the menu does not change when the language is changed. Any idea why the "Multilingual Options" configuration would be missing?

Hello David IGN, the "Multilingual options" only appears if the "Menu Translation" module (part of i18n) is enabled. If it isn't, enable it and run the update script. If it is, disable it and flush all caches. Then enable it again and don't forget to run the update script. After this, when you go to 'admin/structure/menu/add', you should see the Multilingual options fieldset. Cheers!

Hello, I did as you instructed and it did not add the "multilingual options" configuration section to the menu you are creating. Menu Translation was enabled, so I disabled it and cleared the cache. I then enabled Menu Translation and after that ran the update script. Going to add menu the "multilingual options" value is not there. Just to see if it ever is there I installed a new drupal 7 (fresh copy) and installed views2/internationalization. Now that option for "multilingual options" is added to the "add menu" page. Oiiii veh. Considering using the new site to make sure my menus are translatable, then installing all my other modules I had for my old site, and adding all views/content types. Would love it if you had some other non tedious path for me to try to tread first...Any other ideas? (ps: thanks for helping me)

Hey David, well if you're squeezed for time, you could try updating the old site with the latest versions of Drupal core and other modules. That might do it - but there's no guarantee. A fresh start with an orderly setup is sometimes a better approach. It's also an opportunity to learn - practice makes perfect.

Hi! Thank you a lot - that post saved my day :) Keep on. Best regards Chris

Helpful tutorial, thank you! To bypass the Main menu, another approach may be less confusing: Deactivate the Main menu in the theme settings and use the Menu block module to render the two custom menus.

great tutorial, thank you very much! it helped me putting up a bilingual website just as i intended to.

Add new comment

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
Refresh Type the characters you see in this picture.
Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.