When people start to think about the structure of a website, one of the first things they often think about is the menu structure. They worry over that structure to make sure that all the needed information is planned for and laid out in the most useful way.

Remember that in a Content Management System (CMS) such as Drupal, data has no location other than being somewhere in the database. It can be difficult for some people to think about a menu structure in which menu items can appear in multiple places and some of the data appears nowhere. Further muddying the waters is the fact that interface designers for some time now have been having second thoughts about the traditional menus and menu bar. The rise of web-based applications has helped this along. In traditional applications, the menus control the application; in a web-based application, the menus control the browser, and the menus for the web-based application are implemented with HTML (in old-fashioned interfaces) or in a modern tool such as Drupal.

As this hour explores how Drupal handles menus, think about the opportunities that you have. Many modern websites have no internal menus; buttons and other interface elements control navigation. You can do that with Drupal. Other modern websites have hierarchical menus for specific areas of the site and perhaps the entire site. Buttons and other interface elements interact with traditional hierarchical menus so that you can jump in and out.

In this hour, you will see the basics of Drupal’s menu implementation, as well as the specifics of the implementations in Drupal 6 and Drupal 7. One of the major changes in Drupal 7 has to do with the menu structure. Basically, what has happened is that Drupal’s menu structure has grown a bit too large for convenient management. (This is far from uncommon: <insert name of your favorite office productivity tool here> is a classic example.) The solution in Drupal 7 is to break the menu structure apart so that the remaining component parts are, once again, manageable. The general structure of menus, however, has not changed between Drupal 6 and 7.

The easiest way to become familiar with Drupal’s menus is to explore some examples. Here is a walk-through of some of the basic concepts. Remember that you can customize just about everything.

Figure 21.1 shows two parts of a menu structure in Drupal. At the left, you can see a primary links menu (you can change the name to anything you want). This is a traditional looking menu with two menu items, each of which has two subitems. As you will see, you can control their order and hierarchy as well as whether the subitems are shown by default.

Figure 21.1. Drupal can build a links menu.

At the upper right, the primary links menu is shown again. At the top right of the page, the two main items are shown. As you can see by comparing Figure 21.1 and Figure 21.2, clicking one of the primary links brings up the appropriate sublinks. Compare the hierarchical menu at the left in both figures with the menus at the upper right.

Figure 21.2. The links menu can also be shown in a hierarchical structure.

The links in the upper right can also be independent. Note in Figure 21.3 that the top line links at the right represent the main links in the primary links menu, but the lower line (Shop Online and Upcoming Events) are totally separate links. Note, too, that at the top left of the page those other links are shown again; this time, they are arranged hierarchically and are preceded by their title. (You can change Secondary Links to anything else, such as Services or Products.)

Figure 21.3. Links need not be hierarchical.

Here is what you have been looking at in Drupal terms:

In addition to the primary and secondary links, another set of links make up the navigation menu. Although your content and standard Drupal paths can appear in primary or secondary links as well as in the navigation menu, in most cases, your site’s content appears in primary and secondary links while Drupal paths (such as Administer, Create Content, My Account, and Log Out) typically appear in the navigation menu.

The names Primary Links and Secondary Links imply a hierarchical structure to many people. As you work with them, you may want to think of them simply as two different sets of links (Red and Green, for example). Hierarchical menus are another matter.

You have seen the basics of using menus in a theme display and in a block on your site. Before going deeper into those issues, it makes sense to look at exactly how menus are built and where they come from. In Drupal, it is difficult, but not impossible, to create a menu with dead items. It is simple to disable a menu item so that it is grayed out, but having a menu item that points to nothing requires a bit of fiddling—and that is a good thing most of the time.

To help you build menus that function, Drupal gives you two ways of building a menu:

Most people use both methods at various times.

Starting from the Menu

This section helps you manage the default menus in Drupal as well as add new ones of your own. One of the most visible changes between Drupal 6 and Drupal 7 is in the default menus.

Drupal 6

There are three default menus in Drupal 6:

• Navigation— This menu contains all the default commands including My Account, Create Content, Administer, and Log Out.

• Primary Menu— Initially empty, you can add items to it as described previously.

• Secondary Menu— Also initially empty, you can add items to it.

You can add items to the default menus and create your own menus.

In Drupal 6, go to Administer, Site Building, Menus (admin/build/menu), as shown in Figure 21.8. From the list of default menus shown in Figure 21.8, you can add new menus or edit the menus.

Figure 21.8. Configure menus in Drupal 6.

Drupal 7

In Drupal 7, menus have been rearranged along with the administrative interface. In fact, the rearrangements are not drastic, but they improve usability. The following is a guide to the default menus in Drupal 7. As is the case in all versions of Drupal, you can rearrange menus and their items:

• Administration shortcuts— The Add, Find Content, and Dashboard commands shown at the top of the window when you are administrating Drupal. You can add or remove items from this menu.

• Main menu— The menu known as Primary Links in Drupal 6 and previous versions.

• Management— The main submenu items (Content, Structure, and so forth) appear across the top of the window.

• Navigation— The navigation menu from Drupal 6 and previous versions with management and user items (such as log out) removed.

• Secondary menu— The secondary links menu from Drupal 6 and previous versions.

• User menu— Contains user account commands as well as Log Out.

Although the list of default menus differs from Drupal 6 to Drupal 7, the way you manage those menus and their items is the same.

Go to Administer, Structure, Menus (admin/structure/menu), as shown in Figure 21.9. You can also use the Structure button and then the Menus link.

Figure 21.9. Administer menus in Drupal 7.

Try It Yourself: Add a Home Menu Item (Drupal 6)

To begin, make sure that the Blog module is enabled in Core. Figure 21.10 shows the basic Navigator menu for a user with permission only to create, edit, and delete blog and story content. This is the default, provided you have enabled the blog module.

Figure 21.10. A user with limited permissions has a limited Navigation menu.

In this Try It Yourself, you will see how to modify the Navigation menu so that it contains a Home item that takes you to the site’s front page.

1. Go to Administer, Site Building, Menus (D6: admin/build), as shown previously in Figure 21.8.
2. Click the Navigation menu to open the list of links shown in Figure 21.11.

   Figure 21.11. Begin to edit the menu.

   
3. Click Add Item at the top to add a new menu item. For the path, type in <front> for the front page. For the title, type Home, as shown in Figure 21.12.

   Figure 21.12. Add the Home menu item.

   

   The parent item in Drupal 6 should be Primary Links (the default). Click Save to return to the list shown in Figure 21.11.

4. Use the four-headed arrow to drag the new Home menu item to the top of the list, as shown in Figure 21.13, and then click Save Configuration.

   Figure 21.13. Rearrange the menu list items.

   

   You can experiment with moving the new menu item up and down as well as in and out of another menu. (It would be a very poor interface design to place it as a submenu under Blogs, but you can do that as an experiment.)

Try It Yourself: Add a Home Menu Item (Drupal 7)

To begin, make sure that the Blog module is enabled in Core. Figure 21.14 shows the basic Navigator menu for a user with permission only to create, edit, and delete blog and story content. This is the default, provided you have enabled the blog module.

Figure 21.14. A user with limited permissions has a limited Navigation menu.

In this Try It Yourself, you will see how to modify the Navigation menu so that it contains a Home item that takes you to the site’s front page.

1. Go to Structure, Menus (D7: admin/structure/menu), as shown previously in Figure 21.9.
2. In Drupal 7, click List Links next to the Navigation menu. The list of links shown in Figure 21.15 will open.

   Figure 21.15. Begin to add a Home menu item.

   
3. This step is the same as in the Drupal 6 version.
4. This step is the same as in the Drupal 6 version.

You can put your new menu-building expertise to good use in building customized menu blocks for specific pages. You can let Drupal maintain secondary links and primary links/main menu links based on the hierarchies you have created in your menus. But how do you handle the frequent need to put a marginal menu structure on specific pages? (This process is the same for Drupal 6 and Drupal 7.)

For a large site, you may have sections of the site devoted to specific areas. For an organization’s management structure, those areas could be the following:

This type of site organization lends itself well to a hierarchical approach. For example, the secondary links under Human Resources could be

One issue may draw your attention: Why is Payroll Policies under Human Resources and not under Policies? The answer is that Drupal content has no location. The same page can be listed as submenu links for both topics.

But, you may want to have a customized set of links in a block in the margin of Payroll Policies that contains links such as

You already know how to do this. Go to the Menus page shown previously in Figures 21.8 and 21.9. Click Add Menu to create a new menu, as shown in Figure 21.16.

Figure 21.16. Add a new menu.

The new menu needs a unique internal name (such as hr-resources) and a user-friendly name (such as HR Resources). It will now appear on your list of menus, and you can add items to it the same as you did with the Home menu link. Now that it has been created, you can use it when you create content to specify the Parent Item of new content.

Drupal automatically creates a new block for each new menu that is created. The name of the menu is used for the name of the block; it will appear in the Disabled section of the blocks list, as shown in Figure 21.17. Place it where you want it either by using the pop-up menu or by dragging it. Remember to save the blocks when you are finished.

Figure 21.17. Drupal automatically creates a block for each new menu.

With a few nodes created under the HR Resources menu, you could have a block such as the one shown in Figure 21.18.

Figure 21.18. You can assign content to the menu.

Here is where the block-specific settings you set in the Configure links on the blocks list can come in handy. The HR Resources block that you have created can appear only on specific pages (or on all except specific pages). Remember that paths can appear in multiple menus. You can create several menu-based blocks for sidebars or any other page regions. The process is exactly what has been described here. You might have half a dozen such blocks, each of which appears (or does not appear) on specific pages. Thus, in addition to your basic navigation to major sections of the site, you can have reference menus such as these. If some pages need a number of these menu-based blocks, you can create new, composite menus for their own blocks.

Figure 21.19 shows a menu-based block (HR Resources).

Figure 21.19. Use menu-based blocks.

After you have mastered the basics of menus, you can repeat the process over and over. The use of menu-based blocks, particularly when tied to specific pages, can be an effective way of providing navigation for your end users (and, after you have set it up, it is very easy to implement and reimplement).

Laying out your site’s menu design is something that benefits from more rather than fewer people. Try out your navigation architecture on paper or in a mock-up to see where people have problems.

If your site is button-centric, experiment with a menu-centric interface and vice versa. Do anything you can think of to force yourself and your colleagues to think of your site’s structure from a different perspective.