How to Create a Vertical or Horizontal Menu in Joomla 3

Creating menus is a great and widely-adopted way for enhancing the navigation of a Joomla website. If you are new to Joomla and desire to acquire this skill, this tutorial can help.

By default, the menus in Joomla are created to be vertical, but some users may also want horizontal menus for either preference or website design. There, we will introduce how to create a vertical menu and a horizontal menu respectively in below.

Create a Vertical Menu in Joomla 3

There are altogether 3 steps for creating and displaying a normal Joomla menu: creating a menu, assigning a menu module, and adding menu items.

Create a menu

This step is quite simple. Firstly, log into the Joomla control panel, and navigate to Menus > Menu Manager > Add New Menu.

Then, fill in the form with your desired menu title and menu type. The description is optional, but we will suggest you to enter a short sentence or phrase for future reference. For an example, we use Test Menu as the title. After finishing the form, do not forget to save and close it.

Add a module to the newly built menu

Saving and closing the menu will get you a list of all available menus on your Joomla site. In the list you can see that all the working menus have modules under the Linked Modules column. Now you need to create a module for the menu you created just now by clicking on the corresponding link under Linked Modules.

On the new page, give the module a title, and select a module position for the menu. You can view the available module positions in a certain template first to make sure where you want the module to display. We just add these two things, and for other options, you can customize them as you want.

Add menu items

At last, you need to add the items that you want to show in the menu. You can do this by going back to Menus > Menu Manager, and clicking on Test Menu.

On the new page, click on the green button saying “New”.

There are several settings for the new menu item, and at least, you should finish the following ones.

Menu Title: The title that will be displayed in the menu.
Menu Item Type: You can make a selection from the list as you want. For this tutorial, we choose “Articles > Single Article” to display several articles in the menu.
Select Article: This option appears after we select the item type above. You can just make a choice from the list.
Menu Location: Select the new menu.

You can repeat the actions to add more menu items. When you have added all the menu items you want, you can visit the frontend of your Joomla site to see whether the menu is displayed well. Now you have created a vertical menu successfully.

Create a Horizontal Menu in Joomla 3

To create a horizontal menu, you should at first follow the steps above to create a normal menu, and then make it displayed horizontally by making some changes to the menu module. Assumed that you have already got a menu created, now you should go to Extensions > Module Manager, and find the module for the menu that you would like to customize.

Click on the module name to access the settings. If the module was assigned to a position in the sidebar in the creation, change the position to position-1 which allows horizontal display.

Then, open the “Advanced” tab. There are a number of settings there, and you need to find the one named “Menu Class Suffix” because we will add a suffix to the CSS class of the menu items to make them displayed in a horizontal manner.

Now enter nav-pills for “Menu Class Suffix”. Save the changes and refresh your site to see whether the menu is displayed properly. If not, go back to the Module Manager and leave a blank space before nav-pills.