J3.x:Creating a submenu

Tutorial
How to Create a Submenu in a Joomla! Site

Joomla! 

3.x

In Joomla, submenus can be shown either as one menu with two or more levels or as completely separate menu modules. This is useful for constructing menus showing parent and child level navigation or for showing sublevel menu items in entirely separate positions on your template. To show how to do this, we will step through creating parent and child level menu items and then see how to show those items within one large menu and as a separate menu with only the child level items showing in a separate position on a template.

To begin, menus function with three basic constructs:

• Articles - you need content to link to. This can also be component pieces, other menu items or external links.
• Menu - describes the menu items, the type of navigation, their parent/child relationship to other menu items and the order they are displayed in.
• Menu Module - controls the position and displaying of the menu.

For this tutorial, begin by logging into the Joomla Administrator. If you are unfamiliar with how to login see this article: Logging in or out of the Administrator backend.

Note For this tutorial you need Super Administrator permissions or permissions open enough to create and modify Articles, Menu Items, and Modules. For more information on User Access Control see ACL Tutorial.

Step 1 - Create Your Articles

In our example, we will create top level menu items for Dogs and Cats. Under Dogs, we will have Collies and Pomeranians. Under Cats we will have Burmese and Russian Blues. So the structure of our sample menu items will be as follows:

• Dogs
  • Collies
  • Pomeranians
• Cats
  • Burmese
  • Russian Blues

First, create 4 articles so our menu items will have something to link to: Collies, Pomeranians, Burmese and Russian Blue. See this tutorial if you need help creating an Article: Adding a new Article.

Step 2 - Create the Parent Level Menu Items

To create the structure, we need to navigate to the menu where we want our new menu items. If this is a new menu, you will need to create it. See this tutorial on how to create a menu: Adding a new menu.

Once you have your menu located in the Menu Manager, you will add the parent menu items using the System Links → External URL for each navigation link: Dogs and Cats.

Please note, there are other menu item types that can be used for the parent level navigation structure.

Here are the steps to create sample Menu Items using our example data. For more information on creating Menu Items see Adding a new menu item.

1. Navigate to the Menu Manager by clicking on Menus → Menu Manager
   
2. In the toolbar, click on New
   
3. For the purposes of this exercise we are creating "placeholder" links using the System → External URL menu type for the Dogs and Cats parent level menu items. So, in the new Menu Item, click on the Menu Type select button:
   
4. Click on System Links then scroll down and select External URL.
   
5. Add the Menu Item Title ("Dogs") and type in a hashtag "#" in the Link box.
   
6. Save your menu item.
   
7. Repeat steps 2 - 6 for the Cats Parent Level menu item.

Step 3 - Create the Sublevel Menu Items

Now you will add the sublevel menu items using the Articles → Single Article to create menu links to the individual pages Collies, Pomeranians, Burmese, and Russian Blues. For each Menu Item created, we will set the Parentage to Dogs or Cats.

For more detailed information on how to create a Single Article Menu Type, see Adding a menu item which points to an Article.

Note There are other menu item types that can be used for the sublevel navigation structure.

1. In the toolbar, click on "New".
   
2. In the new Menu Item click on the Menu Type select button:
   
3. Select Articles → Single Article from the list displayed.
   
4. Returning to the Menu Item Detail page, click on the Select Article List.
   
5. Select the Collies article for this example.
   
6. On returning to the Article Detail page, fill in the Menu Item Title. Then click on the Parent Item select list located in the far right column. Find and select the Dogs parent item by scrolling through the Parent Item List. Note that menu levels are displayed with hyphens: "-" (single hyphen) is the highest level, "--" (two hyphens) is the second level, "---" third level and so on.
   
7. Click on the button Save & Close up in the top button.
   
8. Repeat steps 1-7 for the remaining articles Pomeranians with the Dog parent and articles Burmese and Russian Blues for the Cat parent.
9. When you are finished with the "Menu Items" section, the Menu Item Manager should look very similar to the following:
   

Step 4 - Setup the Menu Module

At this point, we have our Articles and Menu Items done. Now we need to update the Menu Module. In Joomla!, the Menu Module determines three things:

1. What the menu looks like.
2. Where on the page it will show.
3. Which pages it will show on.

We will do two examples:

• In the first example, we will set the parameters that show the parent level menu items with the lower level items beneath.
• In the second example, we will add an additional menu module that appears in the left column and shows only the second level menu items.

Note We will do both examples using the Protostar Template included in the core Joomla! installation.

Example 1 - One Menu Module With Second Level Menu Items

To show this as one module, follow these steps:

1. Navigate to Extensions → Module Manager and locate the Menu Module associated with your menu. For instructions on creating a new menu module, see Module Menu
   
2. Click on the module name associated with your menu. In this tutorial, we are selecting Main Menu. Note: this image has been filtered by selecting Menu in the Module type dropdown.
   
3. In the Module details, set the Start level to 1, the End Level to All and set Show Submenu Items to Yes.
   
4. For this tutorial, we have added some styling in the Advanced tab. In the Menu Class Suffix we have entered navbar-nav nav-pills. You can also add navbar-nav nav-tabs for a slightly different look. Note: there is a space before navbar-nav.
   
5. Click on Save & Close.
   
6. Go to the frontend of your site and your menu should look similar to this. In the Protostar Template, the sublevel menu items are displayed as dropdown menu items.
   
7. The source code generated will look similar to this:

<ul class="nav menu navbar-nav nav-pills">
  <li class="item-101 current active"><a href="/" >Home</a></li>
  <li class="item-102"><a class="dropdown-toggle" href="/about-us" >About Us</a></li>
  <li class="item-210 deeper parent"><a href="#" >Dogs</a>
    <ul class="nav-child unstyled small">
      <li class="item-212"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
      <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
    </ul>
  </li>
  <li class="item-211 deeper parent"><a href="#" >Cats</a>
    <ul class="nav-child unstyled small">
      <li class="item-214"><a href="/2015-11-24-14-20-12/burmese" >Burmese </a></li>
      <li class="item-215"><a href="/2015-11-24-14-20-12/russian-blues" >Russian Blues</a></li>
    </ul>
  </li>
</ul>

Example 2 - A Second Menu Module With Child Level Menu Items

To show in a separate module in a different position, follow these steps:

1. Navigate to Extensions → Module Manager and locate or create a second Menu Module associated with your menu. For instructions on creating a new menu module, see Module Menu
   
2. Click on the module name associated with your menu. In this tutorial, we are selecting Left Menu. Note: this image has been filtered by selecting Menu in the Module type dropdown.
   
3. In the Module details, set the Start level to 2, the End Level to All and set Show Submenu Items to Yes. Note the position has changed and the menu we are pointing to is the Main Menu.
   
4. For this tutorial, we have used the Menu Assignment tab and assigned this Menu Module to appear on all pages except the home page.
   
5. Click on Save & Close.
   
6. Go to the frontend of your site and navigate to the Collies article. Your menu should look similar to this. Notice the child level subitems are the only items showing.
   
7. The source code generated will look similar to this:

<ul class="nav menu">
  <li class="item-212 current active"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
  <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
</ul>

Sub-Sub-Menus

Using this same technique, it is easy to create third-level sub-menus. You just make the Parent Menu Item a second-level sub-menu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.