HTML5 Zone is brought to you in partnership with:

I spend my spare time combining the luxury life of having no kids and a wonderful girlfriend with the agonizing pressure of blogging under my Onderhond monicker. As a front-end developer I am raised and nurtured at Internet Architects, a Belgian company investing a lot of time and resources in making the web a better place Niels is a DZone MVB and is not an employee of DZone and has posted 108 posts at DZone. You can read more from them at their website. View Full User Profile

The Breadcrumb: Where does it belong?

05.15.2013
| 1285 views |
  • submit to reddit

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.

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

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.



Published at DZone with permission of Niels Matthijs, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)