How to create and display menus in Joomla

menu link

Contents:


What are Menus, Submenus and Menu Items in Joomla

Websites use menus to help users navigate through their content. Menu is a group of links, displayed horizontally or vertically, which direct to specific pages. Menu links (called menu items in Joomla) can have others links attached to them, hierarchically, forming a parent – child connection. Each group of child links is called submenu. One menu (1st level menu) can have multiple submenus (2nd level menus), each submenu can have multiple submenus too (3rd level menus) and goes on. Creating submenus more than 3 levels deep is considered bad practice because confuses the common user.

Joomla uses menus to display content in front end, such as articles. Actually, menus in Joomla display the content that is created through Joomla components. Components (the most advanced kind of Joomla extensions) is the backbone of Joomla! and perform specific tasks, such as login, registration, search, article display, categories display, etc. So,

Menus Items point to Pages whose content is created by Components performing a Task

Of course, menu items are not limited to components, but they can link to external URLs, or display menu headings, alias and separators.

It is worth mentioning that menus do not link to Joomla modules, but modules, in reverse, are bound to already existing pages (menu items) as supplementary parts of the page.

A fresh clean Joomla 3.x installation creates two menus, Main menu which holds the basic navigation links and User Menu, which is used by registered users.


How to create a new menu

1. Menus > Manage > Add new menu 1

menu link

2. Give a short, meaningful for you, Title for the menu 1, such as “Footer menu”  or “Admin menu”. It is good practice to name it according to the place you intend to use it or to the content you want to add. The title you will give is the name you will in the menu list.

3. In Menu Type 2 give a unique, with no spaces between words, name, eg “footername” or “footer-name”. Menu type is the system name of the menu and it used for internal purposes only.

4. Click Save and Close 3


How to create menu items

 As long as you created a new menu (name eg “Footer menu”), the next step is to add menu items to it. There are two ways to add menu items.

1. Go to Menus > [the menu you just created] > Add New Menu Item…

add menu item1

…Or go to Menus > [the menu you just created] 1 and click New 2

add menu item2

2. In Menu Title 1 write a short comprehensive title. It is what site visitors see in front end.

3. Unless you are familiar with SEO, leave the Alias 2 field blank. Upon saving, Joomla will fill in the field using the title words. The Alias field is used to form in a search engine friendly way the URL of the menu.

4. Click Select 3 in Menu Item Type. A pop up form will display to let you choose the kind of menu item you want to display Image 1 . If you want to display, for example, a Search Page, select Search > Search form or Search Results.

5. On the left hand side of the page, in order to publicly display the menu, confirm that

  • Status is set to Published 4
  • Access is Public 5

6. If you want this menu item to become the Home Page or default of your site set Default Page to  Yes 6

7. Change the order the menu items of the same menu are displayed using the Ordering field. The field is available after saving a newly created menu item 7

8. Click Save or Save and Close to return to Menu Manager 8

create menu item
menu items list

How to create submenus

Submenus in Joomla is a parent menu item that contains child menu items.

Suppose you want to create the one menu item named “My favorite articles”  with two subitems “Article 1” and “Article 2“.
Just create three menu items as it was described in the previous heading How to create menu items, with the following additions:

  • My favorite articles: Parent item set to Menu Item Root 1
  • Article 1: Parent item set to My favorite articles 1
  • Article 2: Parent item set to My favorite articles 1

It goes without saying than in order to set “My favorite articles” as parent menu, it must first be crated and saved, so as to appear in the list 1. Theoretically, there is no limit in the levels depth but menus tree levels deep maximum is the limit for efficient user interface experience.

For the sake of the example, “My favorite articles” Menu Item Type is set to Menu Heading 2 and “Article 1” Menu Item Type is set to Single Article 2. Of course you can select whatever Menu Item Types you prefer.

menu item heading
menu item child

In Menu Manager the parent – child connection of menu items is obvious. Submenu items are intended and below the parent menu item.

menu parent child

How to display menu in front end

You need a container to hold the menu and its items you have created, in order to display it to the front end. This is a job for Modules.

1. Go to Extensions > Modules 1
2. The module Manager will appear. Click New 2

modules new

3. Select Menu from the list of available modules.

module menu selection

4. Give a meaningful Title to the menu module 1, eg “my favorites articles menu” of “Footer menu“.
We don’t want to display the title in the front end; select Hide to hide the title 2

5. In the Select Menu field select the menu you want to be displayed in the front end 3.

6. Confirm that Show Sub-menu Items is set to Yes 4

6. According to the template you use, select the appropriate Position 5

7. Confirm that:

  • Status is set to Published 6
  • Access is Public 7

8. Click Save and Close 8

module edit menu

Display menu horizontally

Joomla displays by default the menu items vertically, one below the other. If you want to display menu links horizontally

  1. go to Advanced Tab of the menu module 1
  2. In Menu Class Suffix write nav-pills with a leading space (press the space key in your keyboard and then write nav-pills) 2
module menu horizontal

Joomla! offers a powerful and flexible way to add and display menus at your site. In this post, we just scratch the surface of Joomla’s menu manager capabilities. You just learn the basics so as to display content. Stay in touch for more in dept tutorials about Joomla menus.

If you found this post useful please share to your favorite social media.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
TOC
Scroll to Top