Every 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.
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).
Figure 1: Breadcrumbs
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.
Figure 2: Static book structure
Create a book structure with a few chapters.
- The Joomla book
- How to use A
- How to use B
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.
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).
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 a Page.
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).
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.
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! 1.6: Build a structure with categories, assign the articles and link it to a category layout.
We'll need a few categories with articles:
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).
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).
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).
Figure 10: Articles in category structure
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.