Understanding menus in Joomla

Menus are the fundamental elements of web browsing. They are the basis of the structure of a site. Available in several forms and categories, they are among the first elements to master in order to set up an idea of website architecture.

With Joomla, you can add as many menus as you want to your site. They can redirect to pages, articles, external links… It all depends on what you want to set up on the site. You will not be limited in terms of the number of items in a menu. The ability to build menus with hierarchy is fully implemented by the default Joomla modules.

Finally, to start manipulating the menus, you don’t have to install anything other than joomla itself. However, if you need anything in particular, you are also free to add free and / or paid extensions to your site to complete your menu customization.

Convinced of the possibilities that the joomla CMS brings to menus? If so, let’s take a look at some uses that you absolutely need to know to handle the menu module in joomla.

The joomla menu module

First of all, let’s take a closer look at the structure of the joomla menu module. To be able to view the menus of your joomla website, you have two paths that you can follow from the Control Panel page of the back office.

By going through the left sidebar (1), you will be redirected to the menu list of your website. By default, after installing the CMS, you will find four elements (Author Menu, Bottom Menu, Main Menu and Main Menu Blog).

If you go to the Menu section of the top navigation bar (2), you will find direct access to each of the menus. You therefore have faster access from the top if you know on which menu to make a change.

If you return to the Menu section, you can easily delete any of them by selecting it (1) and then clicking delete in the action bar (2). With Joomla, the only immutable rule about menus is that there will always be a default menu called Main Menu.

Add items to a menu

Let’s use the Main Menu at your disposal to learn more about how to modify a menu and its items. To access the menu customization window, all you have to do is click on the title of one of the menus in the list. You will then be redirected to a page like this:

We find ourselves in the Menus: Items (Main Menu) section. This window will allow you to handle the items displayed in the Main Menu. You will find the list of Menu items (1) displayed in an ordered list. All the modification elements available to you can be found in the modification bar (2) at the top of the page. You also have, just below the edit bar, a section dedicated to sorting, in case you have a lot of items in your menu.

You can simply add an item to your Menus by clicking on the New button. You are then sent to the item settings window:

Zone (1) is the main area where you will determine which element to display and according to which parameters. You have a large choice of items, click the blue select button for a list of menu item types to appear. Several parameters are available to you to modify the item as you wish.

It’s up to you to experiment in order to understand and choose which parameters seem the most suitable. It is important before saving the item to fill in a title (2), otherwise you will not be able to complete its creation.

Zone (4) is quite special since it offers you a little more technical possibilities. Here, you will have the possibility to create a hierarchy of your items with the parent parameter. The status of the item can also be modified from this section, as are the rights and permissions on its appearance. Finally, it is also possible, in the context of a multilingual site, to limit the item to a specific language.

Once your item is ready, you just have to click on save & close to create it. When you return to the Home page of your site, you will find the Menu with the added element (1). For my part, I chose to display an item referring to contacts on the site.

Here you are, you are able to add items within your menu. After adding all the items necessary for navigation, the order of appearance may not seem coherent to you. Let’s take a look at how to change the order of the menu items.

Change the order of items in a menu

To change the order of the items in a Menu, you must first return to the Menu: Items section of the Menu. Once on the page, you will find a choice of order with the drop-down list (1) on the right.

If you can’t find what you are looking for, you can also drag and drop items to manually change the order. To do this, click and drag from the icon to the left of the item line (2).

When you return to your home page, you will see that the items have changed order.

Now order your menus as you see fit in alphabetical, numerical or personalized order. Once this step is completed, if your Menu contains a lot of items, it would be interesting to build submenus and show a hierarchical architecture.

To make a submenu

We have already seen when creating the item, that there is a parameter named Parent Item. Returning to the Menu: Edit Item section of one of your items, click on this drop-down list. You will be offered a choice of parent, these are the other items of the same Menu. If you decide to register a parent, be sure to save before leaving.

By choosing a parent, the item in question will become a second level link in the Menu hierarchy. This will be represented visually on your site.

It’s a simple manipulation, but one that will have major consequences as your menus grow larger. Depending on your theme and the extensions applied, the submenus will be visually different. It’s up to you to choose the visual personalization to bring to your site (how to personalize your joomla site).

Now, let’s go into a little more detail by bringing a little more complex actions.

Transfer an item from one menu to another

Sometimes you will find yourself building items that you want to move from one Menu to another. It is possible to fulfill the request by removing the item from the old Menu and constructing the item again in the other menu, but that would not be efficient. There is an easy way to switch an item from one Menu to another. Let’s see how to do it:

First thing, you must go back to the Menus: Items (Menu Name) section of the menu where the item to be transferred is located.

Once in the section, check the item to move and click on the Batch button.

Once the Batch button is clicked, a window will open with several drop-down list settings. The one we are interested in is To move or copy your selection please select a menu or parent item.

You will find all the menus available on your site. All you have to do is choose the send menu and you’re good to go. Click on Process and verify that the validation message appears on the page.

Return to the Home page of your site and verify that the transfer of the item has taken place. If so, well done, you have transferred an item from one menu to another, otherwise start the process from the beginning.

Create the module that displays the menu

You will have noticed, a menu is always displayed in a dedicated area. In the previous examples, we kept the zone that joomla offers by default. Joomla gives us the ability to create our own display area through a module. To do this, you must first build the module, then integrate the menu into it. Let’s take a look at the key steps:

Let’s start by discovering a new section, that of modules. From the panel page, click Modules.

You will find the list of modules present on the site. We won’t go into details this time. To create a new module, just click Add.

The next window offers you to choose a type of module. For this time, we will be using a Menu module.

Once in the zone dedicated to the configuration of your menu module, you will be able to enter its name (1), the menu that will be displayed there (2), its location (3) and the order of the menu (4). As always, there are many other settings that can be manipulated to customize your Menu module. Once your choice is validated, you just have to click on the Save button.

By returning to the site preview, you will now find your menu module in the zone indicated during the configuration. Here I have used the (1) Top position to bring my menu to the top of the page. Depending on the position, the design of the Menu may change slightly.

This last tip concludes this overview of the basics of Menus on joomla. We have seen how to create, prioritize, modify a Menu. But also, how to design a module to display menus in different spaces, and even swap menus from one area to another. You are now ready to prepare for navigation on your site.