Larger, more complex sites, with multiple hierarchical levels of content are often the most problematic for the new user to navigate. It’s crucial to know how to access relevant information that may be contained within deeper levels of a site, while retaining some sense of location within the overall site. It can make the difference between a user feeling confident about accessing related content without fearing that they’ll overlook crucial content. In these circumstances, the breadcrumb navigation method may well be the most suitable.

The breadcrumb concept
The idea behind breadcrumb navigation comes from the classic fairy tale, Hansel and Gretel, where the children are led into a deep forest leaving a trail of breadcrumbs behind them, so they can find their way back out again. In terms of website navigation, the user is presented with a top level navigation bar that itemises key categories of a site and enables the user to sequentially expand contained subcategories, before deciding on which specific page they want to load.

As with all our previous navigation methods the underlying code relies on the findDOM code, which is referenced within the opening script tag. This is then followed by a number of domLevel variables that determine the amount of subsequent levels into which you can drill your menu. Increasing or reducing the number of domLevel entries is the key to controlling how many sub-levels your breadcrumb navigation is able to support. This is then followed by the showMenu function which controls the visibility of your navigation layers:

function showMenu(level1,level2,level3) {…}

The contained code may appear long and complex, although it soon makes sense once you recognise the various attributes and ID’s it relies upon, so you can make straightforward changes as you adapt your navigation to include the required number of levels for your particular site to tally with the earlier domLevel variables.

Breadcrumb styles
The style sheet that follows the Javascript opens with a few basic CSS commands that control the general appearance of the pages text, link behaviours and title attributes. However, things get a little more interesting when you scroll down to the more specific class and ID controls.

The .menu class is applied to all the menu listings that our navigation contains and, as such, is primarily used to determine the appearance of each menu’s content. Among the familiar options, the class determines the menu as being absolutely positioned using the width attribute to control each menus horizontal dimensions while the top command ensures its horizontal alignment. Changing these values will alter the amount of space dedicated to each menu and how high or low it will sit within the layout of your page.

There are no vertical commands as these are contained within each of the reliant menu ID’s. The #menuMain is given a value of 10 pixels, giving it some breathing space from the left-hand side of the browser window, while the visibility:visible command ensures the primary navigation is visible when the page loads.

Subsequent ID’s for #menu1 etc, #menu—1 etc and #menu–1–1 etc have their own particular Left attributes to control where they will ultimately be viewed although the visibility:hidden control ensures these layers remain out of view until prompted.

Bearing in mind that the .menu width has been set to 115 pixels and the #menuMain ID finds its left boundary at 10 pixels, you can see how the next level of navigation is positioned at 130, the third at 250 and the fourth at 370 pixels. Should you need to expand the width of the main .menu class, you’ll need to make subsequent changes to the ID Left attributes to prevent overlaying layers.

For example, if you expand the width of the .menu to 130 pixels to cater for longer content titles then you’d need to revise #menu1 to 145, #menu—1 etc to 265 and #menu—1—1 etc to 385. This includes the 5-pixel space between each of the menu’s to keep things recognisable to the viewer.

HTML body
Within the body of the HTML itself, we can see how the .menu class is associated with all the subsequent menu entries that our navigation relies upon. Each menu is contained within a layer defined by a ‹div› tag which specifies the generic .menu class and its more relevant ID that controls its positioning (as we’ve already discovered through the configuration of the opening style sheet). These layers contain regular, recognisable HTML for each menus heading and links.

The links that prompt further menu bars to become visible use the opening showMenu function to pass on the necessary variables and determine which layer is to be revealed. As we’ve created a three-level breadcrumb navigation through the initial domLevel variables, these Javascript links include three values that remain logically named. Option 1 will become (1,null,null), 2.2 (2,2,null) and 3.2.1 (3,2,1) and so on. The values refer to the three values specified in the first line of the showMenu function, so if you were to increase the number of levels you’d need to consider making the necessary changes here as well as the original domLevel variable definition. To aid usability we’ve included a simple greater than bracket to indicate that the link offers further options, while omitting them for those contained at the end of a sequence, so the user is sure that clicking such a link will result in loading up the required page.

(›)

It’s a small consideration, but an important one – it can easily be replaced with a graphic, if you prefer, but through such a consideration the user will be able to expand as many options as they like before committing to clicking through to their chosen end page.

Adapting the code
As with all the DHTML navigation methods we’ve considered throughout this series you will need to bear in mind how your final page layout will integrate with such a navigation feature. Using layers to reveal hidden navigational content, whether through the drop-down menu or using the breadcrumb approach will invariably mean elements of your page become hidden as users explore the content of your site.

Using semi-transparent background imagery may help to blend the function of the navigation with the design of your site or you may choose to adapt the design of the menu to better suit your layout. We’ve provided a number of suggestions as to how you might do this through additional menu bars, as well as providing some advice on how to change the number of links contained.

But another method might be to alter the layout of the breadcrumb concept. A horizontal approach may be the most logical solution, but you may also consider creating a vertical breadcrumb variation. This presents a few issues worth considering in that is becomes much more difficult to guarantee the height attributes of your individual menu layers, but if you’re strict about their content and carry out checks across numerous browsers then there’s no reason why you can’t get more creative with your DHTML.