Bio-Rad Laboratories : Solidifying section menus

A ‘double-decker’ navigation bar resolves issues with more conventional systems and frees up space for product promotion.

The Site

Bio-Rad Laboratories, a developer and B2B supplier of health care products, has structured the main sections of its website around its six product areas. These are set out in a series of ‘tabs’ on the upper line of a double-decker universal navigation bar running across the top of all pages on the site.

In each tab the section heading is reversed out in white type on a dark green background except for the current section, which is distinguished by dark green lettering on a light green background. The highlighted tab also connects to the bar’s lower deck, which carries the section menu using the same dark/light green combination, with the open item highlighted on a white background.

For subsidiary levels of content a breadcrumb trail is used below the navigation bar.

The Takeaway

It is surprising how many sites fall down on the basic job of providing two-level navigation. The most common answer is to provide primary links across the top, with changing secondary links to the left. This is easy to use, but does take up potentially valuable space. Another solution is to use mouseover devices to show sub-section menus from the universal navigation bar. But these have an inherent tendency to instability and could conceivably breach accessibility guidelines.

Bio-Rad’s double-decker bar charts a neat way round these problems, flattening out the sub-menu into a string rather than a list so that it can sit beneath the primary links and using colour combinations to make clear the connection between upper-level heading and lower-level sub-headings. The use of tabs as navigation devices will already be familiar to the many who use Amazon.

Bio-Rad then makes use of the space freed up to the left either to show universal product links, for example, to its online catalogue, or to display individual product range menus at a deeper level within the site.

First published on 22 September, 2005