Breadcrumbs allow the reader to follow the trail back to the homepage in a site with nested levels or hierarchy. Breadcrumbs are helpful for readers who have followed a particular path and wish to backtrack, or readers who have landed on a random page within your site.

If used, breadcrumbs should appear at the top of a page, above the page title.

Breadcrumbs have two style options, which should be implemented within a <div>:

<div id="breadcrumb">
        <a href="homepage">Sitename</a> &raquo; <a href="item-a">Menu item a </a> &raquo; Page title

Or, alternatively,

<div id="breadcrumb">
        <a href="homepage"><img src="//" class="w16px absmiddle" alt="Home"></a> &raquo; <a href="item-a">Menu item a </a> &raquo; Page title

&raquo; is the character code for »

Please note, if using the home icon, you must include the alt attribute (alt="Home") to meet accessibility requirements. The style of breadcrumb must also be used consistently through the site.

The title of the page currently open should appear within the breadcrumb. It should not be linked, and will, therefore, be a different colour to the rest of the breadcrumb.

Updated:  7 June 2021/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle