Utility navigation

Most products end up with three navigation systems and one of them has no obvious name. Global navigation is the set of destinations present on every screen and unchanged wherever the reader is. Local navigation is the set scoped to the section they are standing in, replaced wholesale when they move. Utility navigation is the third: the small cluster of tools that are about the reader rather than about the content, so it changes with who is signed in rather than with where they are. Search, help, language, currency, account, basket, sign out. It is usually drawn smaller, set apart, and pushed to the far corner, and NN/g’s account of it is that this separation is the whole point: readers learn to look in the corner for tools and along the bar for content.

The test for whether something belongs here is simple. Ask whether the link describes a part of the site or an action the reader takes on their own relationship with it. Products is content. Sign in is not. Pricing is content. Change currency is not. The set is also the one place where an icon on its own is defensible, because a basket, a magnifier and an avatar are among the very few glyphs with settled meanings, and even then the count on the basket is doing more work than the glyph. Anything less universal gets a word beside it.

Position carries the meaning. On the desktop web the cluster sits either at the right end of the same bar as the main nav or in a thin strip above it, which is why the markup for that strip is so often called a pre-header. Either way the reader reads it as secondary because it is smaller, quieter, and out of the flow of the content links. Losing that contrast is the common failure: once a utility item is styled like a main destination, the main nav has silently grown an extra item and the reader has to work out which of these words are places.

Two things go wrong at narrow widths. The first is collapsing everything into one hamburger menu, which buries account and basket in the same drawer as the content links and destroys the distinction the layout was making. The usual fix is to keep the two or three utility controls that matter as icons in the bar and collapse only the content links. The second is drift: utility strips attract whatever has nowhere else to live, so a bar that started as search and account acquires a careers link, a status page, and a promotion, until it is a second global nav that nobody planned. Both are worth re-checking whenever the header is touched.