Structured menu's: Use 1 menu only!
In one of the SEO checklist articles I already explained how important it is to have a clear and logical URL structure. One frequent cause of messed up URL structures is an unclear structure in menus. In Joomla, URLs are primarily based on the menu structure, so if your menus are not structured, your URLs probably won't be either... The solution: even on larger sites, don't create separate menus for your sidebars and footers, but only use one menu!
Note: though this article shows screenshots of a Joomla 3 site, the article is reviewed and improved for Joomla 4.
Let me explain this through an example. On larger sites, it is not strange to have the need to structure your sites with multiple levels (main navigation, submenu and sub-submenu's). A life example could be Products> >> Gardening >> Shovel. Now using 3 levels of navigation can sometimes be confusing for navigation, especially for elderly people, so something that is often done is to create a menu with 2 levels, with a sidebar menu for the different gardening products. One of the problems (apart from the complexity of positioning your other modules) is that the breadcrumb path does not reflect the correct structure anymore:
- Desired breadcrumbs and URL structure: Home >> Products >> Gardening >> Shovel
- With a separate sidebar menu: Home >> Shovel
This is also reflected in the URL structure and should be avoided. Something else, that is often seen: The footer displays the main menu again, but this is a separate menu. Many don't know that you can simply re-use the main menu for this!
Desired menu set-up
So, what we want is more or less the following:
What we have here is:
- The main menu is configured with 3 levels
- The top menu however only shows the first 2, for easy navigation
- The sidebar menu only shows the 3rd level, and dynamically changes based on the 2nd level
- The footer menu is simply the same as the top menu, but only shows the 1st level
Set up one menu with all levels
So, how do we achieve this? Well, first we have to configure our menu of course. This is simply the menu with all 3 levels configured:
Use Levels in your menu modules
Now we will configure all 3 menus (Top, Sidebar, Footer) using this menu. You probably have seen the parameters I used often, but just never used them. Let's just show you how it works for the Sidebar menu, the other menus will be clear enough then. We will create the Sidebar menu using the Main Menu we configured, but instead of leaving the defaults in the menu, we will now use the Start and End levels to define what will be shown:
You see, this one starts at Level 3! The 2 levels above are not shown. Leaving the Base Item on current ensures that we only see the options connected to the current menu item in level 2. Choosing another item in level 2 will give you another set of options in level 3.
For the top menu, we use Start Level 1 and End Level 2, while the Footer menu uses Start and End Level 1 only.
You see, only one real menu, with just many menu modules. The URL structure will now always be correct, as well as the breadcrumb path. Definitely use this for larger sites, it is great for your SEO efforts!
