Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Creating a simple Joomla submenu

Thursday, May 23rd, 2013 by Servage

Sub-menus on a website allow for prominent links to be placed just below the level of top navigation. They present a cleaner layout for the site’s navigation, and allow side panel links to be employed for other connection types that are perhaps unique to certain pages or sections of a site.

This tutorial is for adding simple sub-menus on a Joomla site and is particularly aimed at users who might be getting onboard with Joomla 3.0. A simple sub-menu in Joomla allows for several options, some of which will be noted in the tutorial. Not all Joomla templates though, allow for sub-menus on the fly. With some coding, it can be done and these advanced steps will be the topic for an upcoming tutorial.

Sub-menu links, like all Joomla menu items can link to just about anything, on or off-site. For this tutorial we will select one on-site option (to a single article) and one external URL or off-site page.

Step 1 – Selecting Menu Type

From the admin toolbar on top, under Menus, we  select the existing menu that is for top navigation (i.e. Top Menu).

This displays a list of current items on the root level for this menu.

All menu items at the root level are primary site links or parent links. In the pic above, you see that Design is indented under Projects indicating that the parent is Projects. You can add sub-menu or child links to any root menu on the top navigation. Now, we’ll add a new one under Home.

We click New to open the details page for our New Menu Item. The first select field is Menu Item Type. For this part of the tutorial, we’ll select “Single Article” from the Articles listing.

Later in tutorial, we’ll select from the System Links list and choose “External URL.” As the steps after this are similar, I suggest trying several menu options, once you have gone through the tutorial.

Step 2 – Primary Details for Article as Sub-menu

For an Article menu, the main details are article selection and menu name. In the pic below, we selected the default “Getting Started” article. On a top navigation menu, you generally want to play it safe with menu titling. Hence most sites go with Home, About, Projects, etc. With sub-menus, you can alter names to be more inviting or creative. We went with “Core Content” as reference to the Getting Started article.

Many details are filled in by Joomla, such as Alias, Status and Link (since it is on-site).

Later, we’ll show how to manipulate the browser page title, which is for an established link (see Advanced Options in Step 4). The “Core Content” title is really just a temporary designation for this content link.

Step 3 – Establishing the Sub-menu

Now for the key step of this tutorial. On the bottom left of the Details area, are 3 selectors establishing links as a sub-menu, or child menu.

As we want this to be on the Top Menu, the menu location remains as is. At this point, the last selector, for Ordering, remains untouched. So, it is simply selecting the Parent Item as to which this current menu item will be a child of. For this tutorial, we select Home.

You’ll notice the dash in front of Home, which matches our earlier Design sub-menu from before, indicating this will be indented underneath the Home menu from now on.

If we go ahead and save these primary details, the New Menu becomes an “Edit Menu Item” noted in the header on top. The alias is filled out to match the Menu Title, the link is filled in, and Ordering now matches Menu Title.

Step 4 – Some Additional Options

On the right side of the Details page there are a few more selectors and a text field. For a simple sub-menu, we’ll keep most of these the same. With an Article link, there is no reason to adjust the Target Window. For the External URL, we will change this.

Tip: The Note text field is for your eyes only, and can serve as a reminder for what the link does. This can be helpful when looking at the list of Menu Items, as we did in Step 1.

This covers the basic details, but before saving again, let’s look at one of the Advanced Options.

For this tutorial, we’re just going to look at the Page Display Options and specifically Browser Page Title. Remember in Step 2, we titled the link with something other than the name of the article. In this text field, we’ll enter “Our Main Article.” Again, this could be anything, and a more clean approach would be to go with the article name, but for now we’re just exploring these options.

Once these additional options are adjusted, let’s Save & Close.

Step 5 – Viewing and Testing the New Sub-menu

Next, we’ll check that all appears well on the menu list as well as the live site. The pics below show what to expect once you’ve saved your new sub-menu.

Finally, we’ll click on the link to see how the page looks and to make sure the link is established.

As you can see at the top, the browser tab is displaying “Our Main Article” as the page heading, and the article title is Getting Started. I left open the sub-menu to show that all three of these elements can be different, even as they are all referencing the same connection – the single article titled “Getting Started.”

Steps 2 through 5 Revisited – Basic Details for External URL as Sub-menu

For an External URL as menu item type (under System Links listing), the details are slightly altered. The link, to the off-site page, becomes the first item to add, and then the Menu Title. We’ll link to Wikipedia’s page on Joomla for this example. Again the title can be anything, but for external link, we’d like to keep our visitor’s in the know, so we title it with “Joomla Info.”

Parent Item is next setting and is same process as mentioned for Article link before. You can select the same parent menu or any that are currently available at the root level of your top navigation window.

With an off-site link, we’ll adjust the Target Window option on the right side of the Details screen. For external URL’s, you are probably best served with selecting “New Window with Navigation.” Secondly, we’ll add a Note of where the link is actually going, as it is not obvious from the Menu Title.

The general rule for the Target Window options is that it’s best to keep visitors on your site for as long as possible. As the external URL takes them away, this option allows for the current window to remain open displaying your site.

The third option for Target Window is “New Window without Navigation” which is likely best for special circumstances. This could actually be an on-site link to an article, such as Terms of Service or FAQ.

We now can Save & Close this sub-menu. Just be sure to view the link in the Menu Items list, then on the front end as the actual sub-menu to Home. Finally, test that the link goes to the external site.

Adding sub-menus in Joomla is easy and opens the door to new ways of organizing content links on and off your site. In an upcoming article, we’ll explain more of the advanced options and features in working with sub-menus in Joomla.


Creating a simple Joomla submenu, 4.2 out of 5 based on 5 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.