Creating Hierarchical Web Sites with Drupal 6

One of the first questions I had when I started working with Drupal for a client project was "How do you emulate a traditional hierarchical site structure?" i.e. tree menus, logical paths, and other such niceties.

I found that there were modules out there that theoretically provided these services (Book, Node Hierarchy, Taxonomy, etc.) but at the time at least, many were not available for 6x, or just didn't work the way I wanted. Here's the solution I ended up using. No claims that it's the best option, but it is relatively easy to use, and requires no custom modules.

The Software:

Besides a working copy of Drupal 6.x, you'll need to install/enable the following modules:

At the time of this writing, not all of these modules had 6.x releases, but all had either usable dev releases, or 6x patches.

Make sure that you've enabled clean URLs. (Usually on by default if your server supports it.)

The URL Paths

The URL path - /products/anvils/acme.html - is an important part of a web site for me. Debate rages in the SEO community as to whether or not search engines consider path components to be part of your keywords or not. However, I do know that humans look at them. You're far more likely to get someone to click on your link with the path above that you would with /node/1523 or q=/node/1523.

The core Path module will let you create verbose paths to your heart's content. However, it requires you (and your users) to remember to do it, and to structure your paths consistently. Not terribly likely to happen.

Pathauto makes this much easier. It allows you to build templates for your URL paths, which are then automatically created when you create new nodes. Here's how to configure it:

  1. Open the Pathauto admin control panel - Administer > Site configuration > Pathauto
  2. Expand the "General settings" pane. Choose either "Create a new alias. Leave the existing alias functioning." or "Create new alias. Delete old alias."
  3. Expand the "Node path settings" pane. Enter "[menupath-raw]/[menu-link-title-raw]" or "[menupath-raw]/[title-raw]" in the "Default path pattern" box. ([menu-link-title-raw] is only available in patched versions of Token.)
  4. Save your settings

This configuration will generate URL paths based on the menu hierarchies that you're about to create. Note that you may want to add in different path patterns for other node types - [yyyy]/[mm]/[title-raw] for stories, for example.

You can also add in fake file extensions if you'd like to make the site look more like a traditional static design - [menupath-raw]/[title-raw].html for example.

The Menus

Drupal's core Menu module already supports the concept of hierarchies, so we're going to use them to drive the rest of the system.

For this example we're going to use the build-in primary-links menu. The process works the same for custom menus.

First we need to put the menu block somewhere it can expand. (You will also have to use a theme that supports multi-level menus. The core Marvin theme is one option.)

  1. Open the Blocks control panel - Administer > Site building > Blocks
  2. Assign the "Primary links" to the left sidebar
  3. Save your changes

Now let's put in some example pages. We'll create a Products page with three products below it:

  1. Create a new page - Create content > Page
  2. Set the Title to "Products"
  3. Expand the "Menu settings" pane. Enter "Products" as the "Menu link title." Make sure the "Parent item" pulldown is set to "Primary links"
  4. Enter some dummy body text
  5. Save the new page

Now we'll create our three product pages. Repeat these steps for each product, changing the name appropriately:

  1. Create a new page - Create content > Page
  2. Set the Title to "Product A"
  3. Expand the "Menu settings" pane. Enter "Product A" as the "Menu link title."
  4. Set the "Parent item" pulldown to "Products"
  5. Enter some dummy body text
  6. Save the new page

That's it. You should now have a menu on the left side of the page with a Products section, and three products below it. All nicely stacked, and with appropriate URL paths.

Next Steps

I often set up Upload path on hierarchical sites so that attached files also stay organized. The module uses the same token template concept that Pathauto does. I generally set it up with [type]/[nid] as the pattern so that each document logically "stays with" its associated node.

Question? Comments? Something not working for you? Let me know.