Menus and content in Joomla! are closely intertwined. If you have experience building websites the old fashioned way, menu links don’t just point to existing pages, as you might expect. When adding a menu link, you don’t just tell Joomla! what page the menu link should point to, but you rather instruct it to make that page. By creating menu links, you created different types of pages.

However, to your visitor, Joomla! menus are no different from other website menus. To your visitor, menus should provide an easy means of navigation.In this article, we’ll concentrate on menus as a means to navigate. We’ll focus on how you can make and tweak menus to design clear and intuitive navigation, and also on how you can help the visitors find what they want without difficulty.

Up to now, you’ve added menu links using mainly the default settings. Let’s find out how we can enhance menus and improve the navigability of the site.

How many menus can you have?

On any Joomla! website you can create as many menus as you want. The default sample site is a good example as it contains no fewer than six menus. On the home page four of those are shown: the horizontal Top Menu, the Main Menu, the Resources Menu, and the Key Concepts Menu. In the backend, all of the menus are listed in the Menu Manager (Menus | Menu Manager).

At least one menu, the Main Menu, is needed for Joomla! to function properly. The other ones, such as the  Top Menu (the top horizontal menu) and the User Menu (a menu that’s only visible after users have logged in), are only there to showcase Joomla!’s menu possibilities. In real life you’ll probably just confuse your visitors with that amount of navigation options popping up on different pages and places.

However, it’s great to be able to create as many menus as you like. This allows you to set up different menus for different functions and different users. You can have a main menu (at the top of the page) containing primary links, and another menu (somewhere down the page) containing secondary links. You might also want to have a special menu with action links (such as Login, and Register) and another menu that’s only shown to visitors who have logged in.

Menus are modules (and why that’s important)
You’ve already seen some examples of modules in action, such as the Poll module. Remember, modules are Joomla!’s magic building blocks that can contain all kinds of functionality. Menus are modules too. In fact, every new menu you add is a new instance of the mod_mainmenu module. This makes menus very flexible. Not only can you have as many menus (menu modules) on your site as you like, but you can also tell Joomla! exactly where (on what part of the screen, in which module position and when (on which specific pages, for which specific users) you want these menus to show up.
Sounds confusing? Don’t worry, we’ll practice adding and customizing menus in this article series—and once you get the hang of it, you’ll really appreciate Joomla!’s amazing menu flexibility.

Creating user-friendly navigation: Cleaning up the Main Menu

When building a site, you’ll start by adding links to the Main Menu. It’s the mandatory menu that is always part of the Joomla! installation, even if you don’t install sample data. But as your site evolves, it can become a long and cluttered list of hyperlinks. Even the menu of our SRUP example site already contains eight links. When you find the Main Menu gets long and messy, what options do you have to improve site navigation?

Option 1: Change the order of menu items

By default, a new menu item is added to the end of the existing menu. If you were to add a new link called New Menu Item, it would show up at the bottom:

In our example site we’ve haven’t paid much attention to menu item order. However, the order in which you add items isn’t necessarily the order in which you want them to be displayed to your visitor.

Time for action—change menu item order

On the SRUP example site main menu there are eight menu items (as you’ve just seen in the previous screenshot). Let’s move things around to present the links in a more logical order. The items that we want to get most attention should be in the top half of the menu; links to less important or static content should be placed down below.

1. Navigate to Menus | Main Menu.
2. In the Order column, enter numbers to reflect the desired order of menu items.
3. Click on the little disc icon on the top row of the Order column to apply the new order.
   

What just happened?

The menu items now show up in the order that you’ve chosen. News and Who are SRUP? have been moved up from their humble position. On the frontend you can see that the order of items has changed:

A quick way to change the position of multiple menu items is to enter the desired order by numbers, as you’ve just seen. If you only want to move one or two menu items up or down you can also click on the green up and down arrows in the Order column.

Option 2: Add a separate new menu

Rearranging menu items is a first step—but there are definitively more powerful ways to improve a menu. You can also clean up a menu by removing links that don’t really fit in, and create a separate menu for these links that you can show somewhere else on the page. This way, you can either emphasize those links in the visual hierarchy of the web page—or you can choose to make them less prominent.

Let’s have a look at the SRUP Main Menu items. Imagine your client has asked you to reorganize the navigation to enable visitors to quickly find the information on ugly paintings that this site is about. As the current Main Menu is rather long, it’s difficult for the visitor to distinguish between links on actual ugly painting contents and links on the organization behind the site A good solution would be to create a separate menu on SRUP-related contents.

Time for action—step 1: Create a new, empty menu

In the Main Menu of the example site, three items are suited to be shown in another menu. These links are of interest to visitors who want to know more are about the SRUP organization. Let’s create a new menu “About SRUP” so that we can move the menu links Who are SRUP?, Mission Statement, and Contact there.

1. Navigate to Menus | Menu Manager. Click on New.
2. In the Menu : [New] screen add a Unique name. This is the name that Joomla! uses to identify the menu; it won’t be visible on the frontend. Enter a name without spaces or special characters. In the following example, we have entered aboutsrup:

   

3. Enter the Title; this is the name that may be displayed with the menu. Enter a Description and a Module Title too. The Module Title will show up in the Module Manager.
4. Click on Save. You’ll be taken to the Menu Manager. At the bottom of the list you can see a new entry. The menu About SRUP has been created:

   

What just happened?

In the Menu Manager you’ve created new menu. It’s visible in the Joomla! backend—but of course it’s still empty.