Getting reliable folding left hand navigation menus with Drupal 6

It’s taken me a while to figure this out – how to get a navigation block that will sit inside a site section and show all pages of the section in a nicely ordered and ‘folding’ list.

The slow way to do this is to build a navigation block and then use block visibility to show it by URL. So if I wanted a navigation block on all ‘About us’ pages you could build a new menu, expose it as a block and then in the block visibility settings use ‘Show only on the following pages’ and use the string “about-s*/*”.

That would show the block in any page which you applied a path name to of about-us/anything-here at the time you authored the page, or later through using the URL aliasing feature in Drupal.

However that gets messy very quickly and is NOT friendly for customers who want to add pages into sections.

The better way is to use the Context module to handle the block visibility, the Menu Block module to handle building a menu and ‘Menu Breadcrumbs’ to allow you to show the breadcrumb trail. Here’s how it works… See it in action on the Arts Inform site I put live early 2010.

1. Menu Block

http://drupalmodules.com/module/menu-block

A well behaved little module that will create a ‘folding’ nav  block for you, building a block anchored to any menu you like. So to create on the About us section of the Arts Inform site I created it as a sub menu of Secondary links (right hand side of the header). Using drop menus this means that you cal rool over About us and see all the sub sections and pages.

This means you can use Menu Block to create a nav menu that starts anywhere you want it to.

  1. Go to Admin > Blocks. As well as ‘Add Block’ you should see ‘Add Menu Block’ – click on this.
  2. Configure the block with a title, choose the parent menu and then the sub-menu where the block should start.
  3. Leave eveything else and save it.
  4. DO NOT ACTIVATE THIS BLOCK – leave it in the ‘unused’ section on the block page.

So for the Arts Inform site I chose Secondary Links > About Us and left all the other settings at default. This will give you a menu that unfolds to show siblings if you click on the parent.

Using Menu Block to make a new menu for the About Us section

Using Menu Block to make a new menu for the About Us section

2. Context

http://drupalmodules.com/module/context

Context can probably do lots of clever things, but I used it for just one thing here – to put the Nice Menu ‘About Us’ into the Left hand Navigation region whenever the page falls under the ‘About us’ section of Secondary Links.

Install Context as per… then goto Admin > Site Building > Context > Add

We want to do a few things here:

1. Give it a name
2. Select the Condition to trigger an action – in this case we want something to happen whenever the page we are viewing is in the ‘About us’ menu. Scan down to and click ‘Menu Path’ on the left and then select ‘About us’ on the right.

condition While you are here marvel at all the other things you could do with the module :-)

3. Select the block you want to activate in the right-hand menu – in this case ‘Nice Menu – About us’.
4. Select the region in which to put it – Click the ‘Add’ on the region, in t his case the standard left hand menu

blocks

Save the context. That’s it. You should see that the next time you are in the About Us section that the menu is visible and that ‘descending’ it exposes the correct navigation.

3. Menu breadcrumbs

http://drupalmodules.com/module/menu-breadcrumb

Install this and go to Admin > Site Configuration > Menu Breadcrumb. The only options here are for things like whether you want the active page listed in the trail. Set how you want, save and forget.

This is the icing on the cake – now your breadcrumbs will follow the menu the page falls into, not rely on the sitewide ‘Navigation’ menu.

Upsides to this technique

  • It’s easy to do once you know how :-)
  • It’s accurate in that you can see what’s happening rather than relying on pattern matching (good for us designers!)
  • If a new item is added into the menu (by publishing a page to it or manually asigning it in Menus) it behaves properly.
  • You can as general or specific as you want (target a whole tree or just one page).

Downsides

For a person publishing a page directly into navigation (the holy grail of content management) there is a trap. They need to setup the page, then save it, then edit it again and assign the page into the correct menu then. I don’t know why they can’t do this the first time – maybe this is a setup issue I have – but it’s not entirely intuitive. This assignment is also alphabetically listed by default – you have to go back into ‘Menus’ to shift things around. There must be a better way of doing this!

If you are handing this site on to someone else and don’t tell them about this technique you will drive them mental trying to figure out how you have done it as the menu blocks will be ‘unused’ and contain no information about visibility. Be nice to your fellow Drupal users and leave a note in a hidden ‘Development notes’ page on your site!

Tags: ,

Comments are closed.