Menus & Navigation

Simon Grange.

Your website's navigation is very important as it influences the user experience. Navigation helps your users get around your website and find the content they're looking for without getting lost.

When you build your website, you start creating the home page, then you build the rest of you site from this home page.

 

There are several tools available to help you organize your navigation:

1 - The menus. Thanks to menus, your visitors will be able to easily access the pages or the sections they're looking for.

2 - The breadcrumbs.

3 - Some modules, such as the Articles Related Items module for example.

4 - The Next & Previous buttons, located at the bottom of your articles.

 

The Menus

The navigation menus play a major role, they allow your users to easily access the different contents on your site. These Menus (which are published by Menu modules) can be placed on any position of your template. Just make sure that the most important menus are visible when a user access your site, whatever the page.

 

Create a new Menu

To create a new Menu, select MenusMenu Manager and click the New button. You'll be taken to this page:

New menu Joomla!

New menu

1 - Enter a title for your menu.

2 - Enter a "Menu Type", this is the system name of your menu. This name should not contain space or special characters.

3 - You can add a description.

Then, click the Save & Close button.

 

Add menu items

The next step is to add menu items to your menu. To do so, select MenusYour menu and hit the New button. You'll be taken to the following page:

New menu item Joomla!

New menu item

1 - Enter a title and an alias for your menu item (if you don't enter an alias, Joomla! will do it for you).

2 - Select the type of menu. Joomla! has 35 native menu item types. We've already seen some of these item types in the previous chapters. They simply allow you to choose which type of content you want to display, like a single article, a list of weblinks, or a link directing to outside sites, etc. The item parameters vary along with the item type, so the above screenshot can differ from your screen if the item type is different. The example that is used here is the Single Article menu item type, which displays one single article.

3 - Select the article that you want this menu item to display.

4 - Choose if you want to open the page in the same window or in another one.

5 - You can select a specific template style for this menu item.

6 - Choose the menu to which this menu item will belong.

7 - Choose if you want this menu item to be a root item or a sub menu of another item.

8 - After saving your item, you will be able to configure the ordering of the menu items that belong to the same menu. This can also be done from the Menu Manager.

9 - Configure the status.

10 - Choose if you want this menu item to be the default page. Usually, the default menu item is the home page. Caution: to work correctly Joomla! needs one and only one menu item to be set as the default menu item (except for multilingual site).

11 - Configure your menu item's access level.

12 - You can assign a language to this menu item (see the multilingual site chapter).

13 - Customize this menu item's parameters, some of them vary along with the type of menu item.

14 - You can choose an image for this menu item and configure the link title.

15 - Here you can customize the page display options.

16 - You can configure the menu item's metadata.

17 - You can assign modules to this menu item.

Once everything is configured properly, you can hit the Save & Close button. You will be taken to the following page (the page may be different according to the menu items that you've already created):

Joomla! menu manager

Menu manager

1 - This toolbar allows you to create, edit, publish, unpublish... your menu items.

2 - If you click the "Search Tools" button, you will see the different filters that can be applied when searching for your menu items. For example, the first filter allows you to select a menu.

3 - Like in every manager, if you sort by ordering you can order your menu items by dragging/dropping.

 

Display a Menu on the site

To display a menu on your site, you need to create a Menu module. To do so, select ExtensionsModule Manager, click the New button and select Menu. You will be taken to the following page:

Joomla! module menu

1 - Enter a title for the module that will display your menu.

2 - Select the menu you want to display.

3 - Select the menu base item that will always be used as the base in order to display your menu. This menu base item must always be displayed. Usually, this parameter doesn't need to be changed.

4 - Select the start level from which the menu items will be displayed.

5 - Select the end level.

6 - Choose whether or not you want to display sub-menu items. Set this parameter to Yes to make the drop-down menus visible.

7 - Here you can find all the parameters that are common to every module.

Once everything is configured properly, you can hit the Save & Close button.

Joomla! modules Frontend

Menus in Frontend

 

Breadcrumbs

Breadcrumbs is a small module enabling your users to easily and quickly access the parent items of the item they are visiting. This module prevents your visitors from getting lost on your website.

 

Publish a breadcrumb

To publish a breadcrumb, select ExtensionsModule Manager, hit the New button, then select Breadcrumbs. You will be taken to this page:

Joomla Breadcrumbs module

Breadcrumbs module

1 - Give a title to your module.

2 - Choose whether or not to show the "You are here" text before the breadcrumb path (you can also change this text by simply creating an override).

3 - Choose to show or not the home page.

4 - If you set the parameter 3 to Yes, you can choose the text you want to display.

5 - Choose whether or not to show the last item in the pathway.

6 - You can enter a character that will separate the breadcrumb's items.

7 - Here you access the options that are common to every module.

Once everything is configured properly, you can hit the Save & Close button.

Joomla! breadcrumbs frontend

Breadcrumb in Frontend

 

Articles Related Items Module

The Articles Related Items module displays (via a module) links directing to the articles that are related to the content your visitors are viewing. To make this module work correctly, you need to add keywords in your contents first. Once this is done, the module will display the articles whose keywords correspond to the article that the visitor is currently viewing.

 

Next & Previous buttons

The Next & Previous buttons are two small buttons located at the bottom of your articles. They enable your users to view the previous or the next article (belonging to the same category). You can enable the display of these buttons:

  • In each article's options
  • In the global settings
  • In the menu item's options (if the articles are displayed via a menu item).