Adding Breadcrumbs for Effective Navigation

Out of all of the design elements that make a web page, breadcrumbs tend to be an afterthought. Whether we recognize it or not, however, breadcrumbs play an essential part in your site’s navigation and user experience. Their integration throughout a site helps ground individual sections within the overall hierarchy and provides needed navigational choices for your users.

Locational breadcrumbs, as the name suggests, are meant to provide a navigational trail of a given page within the context of a website. Their inclusion is absolutely vital for sites that have hundreds, if not thousands, of pages. Without them, your users may struggle to return to pages they once were on or feel lost as they drill down your site’s content.

From a design perspective, breadcrumbs should have a prominent location within a page’s content but they should be muted enough so that they are clearly not the focus. Traditionally, breadcrumbs are inextricably linked with your H1 or main page title. These two pieces of information provide your users a wealth of contextual information, helping confirm that they have found the correct content within the right location. Accordingly, you will typically see breadcrumbs positioned either directly above or below a page’s main title.

When implementing breadcrumbs, there’s two additional recommendations to consider. First, the individual pages within the breadcrumb trails need to be properly demarcated. Use arrows, vertical bars, or other appropriate graphical elements to distinguish each page as its own, separate entity. Second, naming conventions become incredibly important the further down you go a breadcrumb trail. If, for example, two pages within the hierarchy have similar names or titles, then users can momentarily experience navigational confusion and cannot effectively find their wanted content. Use clear, concise, and unique page titles to prevent this from happening.

Below is a sample of an effective breadcrumb trail. All of the necessary HTML and CSS is provided to help get you started.

Step 1 - effective-breadcrumbs.html

Copy and paste the HTML below into your web page.

Step 2 - effective-breadcrumbs.css

Download the CSS below and include it in your web page

Step 3 - Add the includes below to your web page

While not the most exciting design element, breadcrumbs are a necessary detail to consider as you design and build websites. Their exclusion, particularly for sites with vast amounts of content, is immediately noticed as it makes navigation that much more difficult. Planning for their use, even in the basic design stages, can lead to a better user experience.

Customize the above code to use on your own site. Change the color, the trail demarcator, and its placements in reference to the page title.