Navigation

Ice Cream and Cold DrinksEvery site needs an easy to understand navigation, otherwise it will not be possible for a user to find what he is looking for. This may sound simple but is not easily done. In a perfect world it should be possible to access any page on a website with two or three clicks. Another fact is, that often, if not always, your visitors will come from a search engine or social media site and will land anywhere on your site but your frontpage. This is a reason to think about a "Home" button on every page!

A website often has a primary and a secondary navigation. The primary navigation is usually at the top or on the left or right side. Secondary navigation is at the bottom or at the top, but mostly a bit smaller than the primary navigation. It contains links like contact, about us and legal notices. The idea behind this is to have these links at the site but not at a very important position.

As a general rule, do not put more than four to eight links in a navigation level.

Breadcrumbs

A 'breadcrumb trail' is a navigation aid. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the Brothers Grimm fairytale. Usually breadcrumbs are positioned horizontally on the top of a web page. Two structures are used:

  • showing links back to each previous page the user clicked through to get to the current page
  • showing the parent pages of the current one

Breadcrumbs are a way to prevent visitors from feeling lost on your site. Ideally visitors should always know where they are on the site and how to go back. Joomla! provides a breadcrumb module for this task and most templates have a breadcrumb position reserved for it (Figure 1).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 1: Breadcrumbs

Joomla! Menus

Joomla navigations are created by so-called menus. You can create as many menus as you need for your website. Each menu may contain any number of nested menu items and you can even filter the level. A menu item is assigned to a component or an external URL. Modules and template styles can be assigned to menu items. In the example data, a few menus are shown that have already been created.

Let's have a look at two examples of primary navigation with static pages and dynamic categories.

First example: a static catalog or book structure

Sometimes you need a navigation for a book, a catalog or a guide. You'll find this configuration in the example data in the About Joomla! menu. Let's say we're writing a short book consisting of three chapters. The navigation should be linked to all pages and look like figure 2.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 2: Static book structure

Preparation

Create a book structure with a few chapters.

  • The Joomla book
    • Introduction
    • Content
      • How to use A
      • How to use B
    • Templates

Before creating menu items, you have to create individual articles (pages) first. Go to Content Article Manager Add new article (Figure 3). You may assign the uncategorized category to these articles or you can create a book category in advance and assign it to the chapters.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 3: Six 'book chapters'

Step 1: Creating the menu

You can use an already existing menu as your primary links or you can create a new one by accessing Menus Menu Manager → and filling out the form (Figure 4).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 4: Add new menu

Step 2: Creating the menu items

Go to Menus Primary links and add the six articles as links. Choose Single Article as Menu Item Type. Select the article and enter a Menu Title (Figure 5). If you have forgotten how to do that, have a look at the chapter: How to Create an 'About us' Page.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 5: Primary menu items

Step 3: Creating and assigning the module

This step is a bit tricky. You now have the articles, the menu and the menu items but you'll also need a module to position on your site. Let's go ahead and create one. Go to Extensions Modules New Module and fill in the form. In the Field Select Menu in Basic Settings, choose Primary links. Select Yes in the field Show Sub menu items (Figure 6).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 6: Primary links module

The last step is the template position. Click the Select position button, filter for template Beez_20  and choose position-4. Save everything and you're done.

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311

Figure 7: Select template position

Second example: Linking to categories (News magazine)

It is possible to link to a few pages like in the first example but what will you do if you have thousands of articles? The answer is easy in Joomla!: Build a structure with categories, assign the articles and link it to a category layout.

Preparations

We'll need a few categories with articles:

Categories:

  • News
    • World
      • Africa
      • Europe
    • Technology
      • Internet
      • Cars

Create them or use existing categories (Read more: Structure your content with categories).

Step 1: The menu

It's up to you how to continue. The easiest way is to use the existing Primary Links menu. But if you want, you can create a News Menu, like me.

Step 2: The menu items

When dealing with categories you have to think about what should be shown after you have clicked on the link. The expected behavior in our case is

  • Category News = all news should come up
  • Category News → World = we want world news only

and so on (Figure 8).

cocoate.com/node/6032/

Figure 8: Menu items in News menu

To achieve the expected behavior, create a menu item with the type Category Blog. In Required settings, choose your newly created category News. In Blog Layout Options, choose Include Sub Categories - All and # Leading Articles = 0. Continue with creating nested menu items for each additional category and you're done (Figure 9).

cocoate.com/node/6032/

Figure 9: Category Options

Now you can handle thousands of articles. Your navigation is prepared for that and your visitors will understand the system immediately (Figure 10).

cocoate.com/node/6032/

Figure 10: Articles in category structure

Some tweaking

As you have seen, there are nearly infinite possibilities of setting options. Many things are possible and there is usually a way to achieve your goals. Concerning the navigation design, it is possible to filter the level of the menu items in the module. It is possible, for example, to put

  • the first level of our News menu at the top position and the second and third level in the the left or right sidebar
  • the whole menu on top and use drop down menus (depending on the capabilities of the template)

If you play around a bit, you will find a solution for nearly every case. The Joomla! navigation system may be a bit complex on one hand but is very powerful on the other.