Customizing menu Joomla.

Customizing menu Joomla.

Menus are the fundamental elements of web navigation. They form the basis of a site’s structure. They come in a variety of forms and categories, and are one of the first elements you need to master if you want to put in place an idea for the architecture of your website.

With Joomla, you can add as many menus as you like. What’s more, they can redirect you to pages, articles, external links, etc. It all depends on the strategy and requirements you want to implement on your site. There is no limit to the number of items in a menu. The ability to build level menus is fully implemented by Joomla’s native modules.

Finally, to start learning how to manipulate menus with Joomla, you don’t need to add any external elements – all you need is to have Joomla installed and configured. However, for specific or particular needs, it is also possible to add free and/or paid extensions to a website to complete the customisation of the menus.

Are you convinced by the possibilities offered by the Joomla CMS for menus? If so, let’s start by looking at some of the uses you absolutely need to know when using 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 view the menus on a Joomla website, there are two possible paths to follow, starting from the Control Panel page in the back office.

Via the left-hand sidebar (1), the Joomla platform redirects to the list of website menus. By default, after installing the CMS, there are four items (Author Menu, Bottom Menu, Main Menu and Main Menu Blog).

By going to the Menu section of the top navigation bar (2), we find direct access to each of the menus. There is also quicker access from the top, where you can go directly to one of the menus to make a change.

Then, by returning to the Menu section (1), we have the option of deleting one of the menus by selecting it (1) and then clicking delete in the action bar (2). With Joomla, the only immutable rule concerning menus is that there will always be a default menu named Main Menu.

Adding items to a menu Joomla.

Let’s use the Main Menu present on all Joomla sites to learn more about how to modify a menu and its items. To access the menu customisation window, simply click on the title of one of the menus in the list. You will then be redirected to a list page like this:

Finally, we find ourselves in the Menus | Items (Main Menu) section. This window will allow us to manipulate the items displayed in the Main Menu. Here we find the list of Menu items (1) presented in the form of an ordered list. All the editing options are available in the edit bar (2) at the top of the page. There is also, just below the edit bar, a section dedicated to sorting, in case we have a lot of items displayed in the menu.

We can easily add an item to the menus by clicking on the New button in the top bar. We are then redirected to a window where we can set the parameters for the item:

Zone (1) is the main area where we will determine which item to display and according to which parameters. We have a wide choice of items at our disposal; click on the blue select button and a list of menu item types will appear. There are a number of native parameters for modifying the item as you wish.

It’s up to us to try things out to understand and choose the settings we think are best. Before saving the item, it is important to enter a title (2), otherwise we won’t be able to complete the creation.

Zone (4) is rather special in that it offers slightly more technical possibilities. Here we can create a hierarchy for our items using the parent parameter. The status of the item can also be modified from this section, as can the rights and permissions on its appearance. Finally, for a multilingual site, it is also possible to limit the item to a specific language.

Once the item is ready, simply click save & close to create it. Returning to the Home page of the website, we find the Menu with the added item (1). Here, we have chosen to display an item referring to contacts on the site.

That’s all you need to know about adding items to a menu with Joomla. Once you’ve added all the items you need for navigation, the order in which they appear may not seem consistent. Let’s take a look at how to change the order of menu items.

Change the order of items in a menu Joomla.

To change the order of items in a menu Joomla, you first need to return to the Menu | Items section of the Menu in question. Once on the page, there is a choice of order with the drop-down list on the right (1).

To save time, you can drag and drop items to change the order manually. To do this, click and drag from the icon to the left of the item line (2).

Returning to the home page, it comes as no great surprise to see that the order of the items has changed.

You can now arrange your menus as you wish, in alphabetical, numerical or customised order. Once this stage has been completed, if the Menu contains a lot of items, it would be interesting to build sub-menus and show a hierarchical architecture.

How do I create submenus with Joomla?

When you return to the Menu | Edit Item section of one of your items, click on this drop-down list. A choice of parents will be offered, which are in fact the other items in the same Menu. If we decide to enter a parent, it is essential to save the changes before leaving the page.

By selecting a parent, the item in question will become a second-level link in the Menu hierarchy. This will be represented visually on the website:

It’s a simple operation, but one that will have major consequences when a menu expands. Depending on the theme and extensions applied, the submenus will be visually different. Now, let’s go into a little more detail with some slightly more complex actions.

How do I transfer an item from one menu Joomla to another?

Sometimes items have been built in the wrong Menu and we want to move them from one Menu to another. It is possible to do this by deleting the item from the old menu Joomla and building the item again in the other Menu, but this would not be effective. There is a simple way of moving an item from one Menu to another on Joomla. Let’s take a look at how to do it:

First, we need to return to the Menus | Items (Menu Name) section of the menu where the item to be transferred is located. Once in the section, tick the item you want to move and click the Batch button.

Once the Batch button has been clicked, a window opens with several drop-down list parameters. The one we’re interested in is To move or copy your selection please select a menu or parent item.

Here you’ll find all the menus available on the website. All that’s left is to choose the send menu and that’s it. Click on Process and check that the validation message appears on the page.

Go back to the Home page of the website and check that the item has been transferred. If this is the case, the transfer has been a success and we have successfully moved an item from one menu to another. If not, you need to restart the process from the beginning.

Creating a module to display a menu on a Joomla page.

During our modifications, we noticed that the menu is always displayed in its dedicated area. In the previous examples, we kept the default Joomla zone. Joomla gives us the ability to create our own display zone using a module. To do this, you first need to build the module and then integrate the menu. Let’s take a look at the key steps:

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

This is the list of modules available on the site. We won’t go into detail here. To create a new module, simply click on Add.

The next window opens, asking you to choose a module type. This time, we’re going to use a Joomla Menu module.

Once in the area dedicated to setting up our Joomla Menu module, we can enter the name of the module (1), the menu that will be displayed (2), its location (3) and the order of the menu (4). As always, there are many other parameters that can be manipulated to customise a Menu module. Once we’ve made our choice, all we have to do is click on the Save button.

When we return to the site preview, we will now find our Joomla Menu module in the zone indicated during configuration. Here, we have used position 1 Top to display the menu at the top of the page. Depending on the position, the design of the Menu may change slightly.

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer