Merck : Splitting the navigation bar

A simple solution to prevent navigation bars extending downwards and off the screen without reducing their content.

The Site

Merck, the big US pharmaceutical company, uses ‘conventional’ navigation on its website in that the global links across the top of pages remain constant, while a left-hand panel provides in-section navigation.

In the Careers section, the eight left-hand links include Working at Merck, Career Choices and University Recruiting. Clicking on any of these generates a further set of links to a layer of sub-sections. Rather than these running underneath the relevant link, however, they are placed in a column alongside. Both the ‘mother’ and ‘baby’ links are highlighted in green (the company colour), while a short horizontal rule reinforces the link between them. When a ‘baby’ link is clicked, the corresponding heading is marked with a solid green bullet.

The Takeaway

There is great benefit in keeping navigation as conventional as possible, because visitors will instinctively know where to click. This means using a left-hand navigation bar to provide navigation within a section. But often site owners want to give access to a further layer of links, and will typically run these ‘baby’ links under the ‘mother’. The result is that the navigation bar extends downwards, and in some cases can disappear off the bottom of the screen. At this point usability is compromised.

Merck’s answer is simple – run the baby links alongside the mother, make absolutely clear what the relationship is, and you have clear navigation with no extension of the panel. It impinges a little on the space available for main text, but the site design accommodates this, so for Merck at least it is not a problem. All in all, a good example of sticking with convention but giving it a helping hand – maybe it will catch on, and become the standard approach one day.

First published on 01 March, 2005