The Breadcrumb: Where does it belong?
by
Join the DZone community and get the full member experience.
Join For FreeOnce 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, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments