Joomla! 3.1 is the latest, and arguably the best, Joomla! content management system to date and makes building and running a website easy. One of the most important elements of a successful website is making it easy to navigate – this is achieved with the use of menus. For visitors, using menus helps them find their way around your site easy and allows them to get to their intended destination with ease. In this tutorial, we show you how to work with menus and make navigation a breeze.
Creating a menu
Creating a menu in Joomla! 3.1 is a straightforward process. After logging in to your Joomla! dashboard, go to Menus in the top menu and select Menu Manager. Next, click New and enter the required details for:
- Title – the name of your menu to be displayed in the Admin Menubar list
- Menu type – the system name for your menu
- Description – a description of the menu’s use
Click on Save & Close to confirm the menu.
Creating a module for the menu
With the menu created, the next step is to create a module; this is equally as easy.
Go to Menus > Menu Manager and locate your new menu. Under Linked Modules, select Add a module for this menu type and configure the settings for your module. You can alter the settings as you wish, but you must make sure that it has a title and a position.
Click on Save & Close to confirm the new module.
Adding a menu item
So, we’ve created a new menu and module, but for the menu to show we need to add items to it. This should only take a few minutes.
Go to Menus and select your new menu, then, on the top left-hand corner, click on New to alter the menu type settings.
There are numerous settings here and it is possible to link to articles, categories and third-party extensions content. Once your settings have been configured, click on Save. Your menu item(s) should now show on the front page of your website.
Creating a horizontal menu
By default Joomla! 3.1 will display menus in vertical form. Fortunately, thanks to the bootstrap CSS added in Joomla! 3.0, creating a horizontal menu in this version of the CMS is a simple task.
Go to Extensions > Module Manager and select your newly created menu module. In the tabs at the top of the page, click on Options > Advanced Options and look for the Menu Class Suffix setting. For this setting, enter nav-pills (you may need to add a space before it) and click on Save. You will now notice that your menu is displaying horizontally instead of vertically.