Over a million developers have joined DZone.
Platinum Partner

The Breadcrumb: Where does it belong?

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

Once a novel concept, the breadcrumb has become one of the strongholds of just about every content-heavy website's interface out there. When you consider its place in the html though, it's a somewhat unusual component. It falls right in between the site frame and the actual content of a page, not really belonging to either. Most of the time I let the design decide where to add the breadcrumb, but here are a couple of things to consider:

The breadcrumb is clearly part of the meta data of a page (as it indicates the page's position within the entire website) and it varies with each different page. From that point of view, the breadcrumb probably belongs in the header of the page section. It does offer navigational means to get higher sections within the site though, so coming from that angle the site header doesn't sound like such a bad place for a breadcrumb. If you have a breadcrumb that separates the navigation part from the active page part (usually incorporating the h1 of a page) it makes even more sense to put it into the site header, leaving the h1 in the page header and faking the connection using css. But there's also an option to place it inside the introduction section (together with the site label and skip links) if you consider the breadcrumb a vital tool for your user to orient himself.

<div id="introduction">
	 ... <nav class="breadcrumb">...</nav>
<div id="page">
	<div class="breadcrumb">
	 ... </header> ...
<div id="site">
	<header> ...
	<div class="breadcrumb">
	</header> ...

Personally I'd say the breadcrumb belongs in the #page > header as that's where I usually put my meta data when dealing with regular content types. The design may decide differently and in certain cases (where a lot of emphasis is placed onto the breadcrumb) the #introduction section may be better suited to house it. I wouldn't completely rule out the #site > header either, but only when dealing with a split breadcrumb that doesn't encompass the page's main heading. As for the nav/div discussion, I think breadcrumbs are usually secondary navigation means, so a div should suffice. But when placed into the #introduction section I think a nav element is probably the right choice.

Such a simple and well-known component, so many things to worry about.

The Web Dev Zone is brought to you in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.


Published at DZone with permission of Niels Matthijs , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}