Big British Breadcrumbs: A New Look at Website Navigation

When content hierarchies get deep and complex, traditional navigation models can turn into a confusing mess.  Some large content websites from the UK are working the problem by adapting breadcrumbs to play a more significant role in navigation. Here are three examples, starting with the most subtle and progressing to the most bold, of British breadcrumb tweaks in action.

The Crumb Stands Alone – GOV.UK

This is by far one of the most subtle tweaks in the lineup but I still felt it was of note.

gov.uk screenshot

  • These big breadcrumbs are the only primary navigation system at gov.uk;
  • Their large size gives them more visual prominence and makes them easier to click;
  • The current page title isn’t included in the breadcrumb trail.  This makes them cleaner and more inviting.

A breadcrumb-only approach has its downsides, as Paul Boag writes in his Smashing Magazine article, Navigation for Mega-Sites. I agree that the biggest weaknesses of is the difficulty of lateral movement through the site.  The next two sites avoid that limitation by including traditional primary navigation menu, as well as prominent breadcrumb navigation.

Crumb Tease – BBC Sport

Next in the lineup, we have BBC Sport, where a single breadcrumb element is given lots of visual punch and helps to provide a sense of place within subsections that aren’t visible in the primary navigation menu.

screenshot bbc sport

  • A single crumb is followed by tabs.
  • This approach is used only when the parent topic is so specific that there wasn’t room for it in the traditional navigation bars.
  • The initial breadcrumb functions as a section label.
  • The breadcrumb-style arrow visual relates the section label to the items that live within the section.

Exploding Breadcrumbs – The Guardian

Now for the most extreme breadcrumb navigation in the trio, The Guardian.

screenshot guardian

  • Breadcrumbs are used as local sub-navigation.
  • The breadcrumbs are color-coded based on parent topics (for instance, red = news).
  • The initial breadcrumb acts as a section label, and subsequent crumbs indicate subsections.
  • Like BBC Sport, the crumbs are followed with additional navigation.  But instead of tabs, the Guardian presents the links in a gray navigation bar.

Bonus part:  Usually there is no left navigation, but when a user reaches “the end” of the breadcrumb path, voila!  A big list of related links appears, inviting more browsing.

Fresh Bread

Web designers across the pond have shown how breadcrumbs can be reconsidered in their relationship to an entire navigation system.  No longer just a trail of tiny, stale links to be ignored unless you’re lost, breadcrumbs can be made fresh and appealing, and perhaps more useful than before.

I’ll be considering new uses for breadcrumbs in my own design efforts, doing usability testing, and adding updates to this post as I learn more.

In the meantime, pass the crumpets!

Have you seen other sites with nifty breadcrumb/navigation treatments? Please share!

Categories: Design and Information Architecture | Tags: , | Bookmark the permalink.
Kelly Browning

About Kelly Browning

Kelly is Matrix Group's Director of Strategy — constructing critical links between new clients and their site users. She enjoys learning about new clients and helping them formulate strategies for most effectively connecting with their users on the web. Before coming to Matrix Group, she was a project manager for Threespot Media. Outside of work, she likes to paint and attend antique auctions.