Use 2 separate main menus on your Joomla site

Last Updated:

August 28th, 2015

Category:

Basic Tutorials

You’ve likely noticed that on several of our template demo Joomla! pages there’s 2 different main menus; one for the HomePage and another for the subpages. Such functionality may be very useful, especially when you’re building a OnePage Layout website and want to have links to the different one-page sections on the frontpage which won’t be needed on the subpages, or to link to additional content which you could not include on Homepage.

Why use the separate menus?

In Joomla templates this is a useful option when you are linking to anchors. Normal links always point to the top of a page, whereas anchors point to a place within a page; modules in most cases. Anchors are generally used when you create OnePage Layout with considerable amounts of text and objects like images, charts etc. Anchors are invisible to the reader when the page is displayed.

A # in front of a link location specifies that the link is pointing to an anchor on a page rather than a separate URL. The link syntax for the anchor is usually kept simple, for example: #blog, #contact. The anchor name in the full URL is concatenated into a single word, with all spaces removed. Remember that the anchor name is case-sensitive.

As some things about our template structure has changes over the last few years, in the following guide we’ll show you two techniques you can use to help you reach your goal of two separate Main Menus.

Dual Menus in our Modern templates

In our modern OnePage-style templates, specifically all those released since GK John, we used our modified Gavern Framework which allows you to choose a separate menu for the Homepage and Subpages right in the template options – this is a very comfortable solution as you can see in this screenshot.

All you have to do is create (add) two different Menus in your menu manager and select which menu should go where in the in template settings; easy-peasy!

Separate Menu in Older OnePage templates

Now the hard part; if you’re using our pre- GK John templates, like Gk Creativity, GK Simplicity, GK Creative or any other template that you want to get two separate menus on, then there’s going to be a few extra steps as these “old” templates don’t include the helpful feature discussed above. Follow those steps:

1. First, you’ll have to create 2 separate menus, just like in the ‘easy’ method above – one for the HomePage where you can use Anchor links and internal links to default (articles, contacts etc.) or 3th party components (K2 items, K2Store, JomSocial, EasyBlog etc.).
   The second menu will be used on all other subpages, so you’ll probably want to include internal links to articles, components etc..

   Note, this is an important tip: the SubPages menu must have a Home link which will be set as the default for the whole website.

   

2. Now, in your Template Manager you need to clone, or duplicate, the default template style . As a result you’ll have 2 instances of the exact same template but with different settings.

   

3. The subpage menu should be set as the default template ( the yellow star indicates that the style is set as default). Navigate to its settings>menu tab and select the Menu which you want to use for your subpages.
4. Now you can focus on the newly-created clone of your template, that you will use only for the HomePage. By default, Joomla! assigns a template style to all menu items upon installation. But since version 2.5 Joomla! gives you the option of switching between two or more styles on the Front-end. This is done with “Menu Assignment”, so you can set different styles for each menu or only a menu item. This allows specific “pages” that are defined by menu links to be set to a specific style, including styles from separate templates.

   But it does require two small changes to the settings:

   1. First, also set a Menu in this clone template; this will be used only on the HomePage.
   2. Second, in the “Menus assignment” tab you have to apply the current style to a menu item’s corresponding web page. In most cases check the box next to the “Home” menu item only and now you can Save settings. Go to the front-end of your website and refresh the page to view the modifications.

      

As far as the CMS is concerned, this setting means that that template style will be used only on this menu item position while the rest of the system will continue using the template which was set as the Default. The Joomla! templating system uses the ItemID to determine which template/style to show. ItemIDs are created when you create a menu link. This is why only menu items are shown in the list of pages to which you can assign templates/styles.
Note: You cannot assign the default style to individual pages.

This article was first published May 22nd, 2014