There is an inherent problem with the built-in menu's provided in Joomla!, namely they only convey sub-levels in the vertical mode, and then only in a limited format due to the nature of their construction (tables and spacer images). The vast majority of web-based navigation uses a horizontal 'tab' metaphor for primary navigation, and then associated sub-navigation either horizontally or more commonly, vertically. The important caveat to this is that the top 'tab' navigation should remain in an 'active' or 'on' state when in that tab's sub-navigation to provide a clear site structure and hierarchy. This is simply not possible to achieve using the default Joomla! menu system and so we at RocketTheme created our own SplitMenu to solve the problem. This month, we've taken the venerable SplitMenu and added a twist. The SplitMenu in Sporticus has been optimized and we've added a new feature: 3rd level vertical menu!

What does all this mean?

Ok, first you need to tell the template which Joomla! menu you wish to use. We default to "mainmenu" and for the most part you probably won't need to change this. Next, you have to create your menu in a hierarchical/tree fashion (see Configuration section below for more help). When you have your menu setup and view the site in your browser you should be able to navigate via the menu as shown below:

So the top level items show up in the area marked #1. This is the primary navigation element. Children, or sub-items of these top-level menu items show up in the area below if available. This is the area marked #2. If these second-level items have children/sub-items, they will show up in the area marked #3 in a vertical style menu. You can see this in action on this page.

The really great thing about handling your menus in a hierarchical fashion is that you always maintain your state. What that means is that when you click on "Sample Content A", the "Features" and "SplitMenu Overview" menu items remain highlighted! Pretty cool eh?

Configuration

So the question is how to setup this hierarchical menu in Joomla! to take advantage of the SplitMenu and all the benefits and trappings that come with it? Well the good news is that it can all be done in Joomla! administrator without the need of any special software or component because although the default menu module might be lacking, the menu administration in quite sound.

The first step is to login to the Joomla! Administrator console and navigate to the Menu drop-down, and then select the menu you wish to configure. This is usually main menu. As you can see in the image of the menu manager you can easily construct a hierarchical 'tree' like menu structure that will translate nicely into the SplitMenu. To achieve this you can click on a menu item, and then in it's Details section, you can select a Parent Item. In the case of this demonstration you can see that the Joomla! License menu item has a parent of J! Extensions. This is represented in the main menu manager with the Joomla! License item being a 'child' or 'sub-item' of J! Extensions. On the site you'll see that when you click on J! Extensions a vertical (by default) sub menu appears, of which Joomla! License is one of the entries.