What the menu builder is
The main menu is the bar of links visitors use to move around the website. In Content (CMS) › Menu you build it on a single screen: you add items with the form on the right, arrange them in the list on the left and click Save.
| Concept | What it is |
|---|---|
| Menu for a language | Each language on the website has its own menu, with its own texts and addresses. When you open the module you see the one for the default language; you choose the others with Load menu. |
| Item | Each link in the menu: a text and the URL it leads to. |
| Drop-down | An item that contains others (subitems), shown when the visitor hovers over it. |
| Order | The position of each item in the list, which is the same position it will have on the website. |
The 5 steps to build the menu
What do you want to do?
Choosing the menu for a language
What it is for
Loading the menu for the language you want to set up or change. Each language on the website has its own menu.
When to use it
Every time you open the module, before adding or moving items.
- Home
- Destinations
- Beach
- Mountain
- Offers
- Contact
Step by step
- When you open the module, the menu for the website’s default language is loaded. To work on another one, click Load menu and choose its flag. The flag next to Menu shows the language you are editing, and the list shows its items.
- Check that the URL field on the right starts with that language’s prefix, for example /en/. It is filled in automatically when the menu loads.
Adding an item to the menu
What it is for
Creating a link in the main menu: its text, the page it leads to and how it opens.
When to use it
When you publish a new section of the website or set up the menu for the first time.
- Home
- Destinations
- Offers5
Step by step
- In Text, type the name visitors will see in the menu.
- In URL, type the page address after the language prefix.
- If you like, change Target, Styles or Class name (see the table of fields).
- Click Add. The button is only enabled once there is a text and a URL. Discard clears the form without adding anything.
- The item appears at the end of the list on the left. Move it into place and click Save.
| Field | What it does |
|---|---|
| Text | Name of the link in the menu. Required. |
| URL | Page the link leads to, with the language prefix (for example, /en/offers/) or the full address of another website. Required. |
| Target | How the link opens: Self in the same tab (the usual choice), Blank in a new tab and Top in the full browser window. |
| Styles | Visual style of the item: None, Sidebars, Underline or Bold. The final look depends on the design of each website. |
| Class name | Extra CSS class to give the item its own style. Leave it empty if your website does not need one. |
Creating a drop-down menu
What it is for
Grouping several items under another one, shown when the visitor hovers over it on the website (for example, the destinations under “Destinations”).
When to use it
When a section has several pages and you don’t want to fill the main menu with links.
- Home
- 3Destinations
- Beach2
- Mountain1
- Offers
- Contact
Step by step
- Drag each subitem onto the main item, slightly to the right, and drop it inside. You can also place it just below and click the button with the upward arrow (move in): it becomes a subitem of the item above it.
- To take a subitem out of the drop-down, click the button with the downward arrow (move out). It goes back to the first level of the menu.
- Click − to collapse the subitems and + to show them. This only changes how the list looks; it does not affect the website.
- Click Save.
Ordering the items
What it is for
Changing the order in which the items appear in the website menu.
When to use it
After adding a new item, which always goes at the end, or when reorganising the menu.
- Home
- Destinations
- Beach
- Mountain
- Offers12
- Contact
Step by step
- Drag the item with the mouse to its new position and drop it. Subitems move together with their main item. If you drop it slightly to the right, inside another item, it becomes its subitem.
- You can also use the arrows on each row to move it up or down one position.
- Click Save to apply the new order on the website.
Editing an item
What it is for
Changing the text, the URL or the behaviour of an item that is already in the menu.
When to use it
When you rename a section or a page address changes.
- Home
- Destinations1
- Offers
Step by step
- Click the blue pencil on the item. The form on the right is outlined in blue and shows its details.
- Change what you need: Text, URL, Target, Styles or Class name.
- Click Actualizar (update) to apply the change to the list, or Cancelar (cancel) to leave it as it was. Then click Save.
Deleting an item
What it is for
Removing a link you no longer need from the menu.
When to use it
When you retire a section or a page from the website.
- Home
- Destinations
- Summer deals1
- Contact
Step by step
- Click the red bin on the item. It disappears from the list.
- Click Save to remove it from the website menu as well.
Saving the menu
What it is for
Publishing all the changes in the list on the website: new, edited and deleted items and the new order.
When to use it
Every time you finish setting up the menu for a language.
- Home
- Destinations
- Beach
- Mountain
- Offers
- Contact
Step by step
- Check the list and click Save. The menu for the language shown by the flag is saved; repeat the process for each language on your website.
Good practice
Few main items
Between 5 and 7 items on the first level. Group the rest in drop-downs.
Short texts
One or two words per item, so the menu fits on one line.
The same menu in every language
Keep the same items in the same order in all languages, with the texts translated.
Relative addresses
For pages on your website, use the path with the language prefix (/en/…) instead of the full address.
- The flag next to Menu is the one for the language you want to change.
- All URLs have that language’s prefix.
- The subitems are inside the right item.
- The order of the list is the one you want on the website.
- Links to other websites open in a new tab.