Breadcrumbs

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> » 
    <a href="item-a">Menu item a </a> » 
    Page title
</div>

Or, alternatively,


<div id="breadcrumb">
    <a href="homepage">
        <img src="//marketing-pages.anu.edu.au/_anu/images/icons/web/home.png" 
            class="w16px absmiddle"
            alt="Home">
    </a> »
    <a href="item-a">Menu item a </a> »
    Page title
</div>

» 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.

Breadcrumb is a type of secondary navigation scheme that reveals the user's current location on a website. It allows the user to follow the trail back to the homepage. Breadcrumb helps to demonstrate the current page's hierarchical level, each text link is for a page that is one level higher than the one on its right.

Consider breadcrumb as an extra feature, it should not replace the primary navigation menus, and it should always appear at the top of the page content, above the page title and below the header section.

General
Customisation

Standard breadcrumb design

Code structure


        <div id="breadcrumb" class="d-flex">
            <a href="homepage">
                <img src="//marketing-pages.anu.edu.au/_anu/images/icons/web/home.png" 
                    class="w16px absmiddle"
                    alt="Home">
            </a> »
            <a href="item-a">Menu item a </a> »
            Current page title
        </div>

You must include the alt attribute in image(alt="Home") to meet accessibility requirements. The style of breadcrumb must also be used consistently throughout the site.

The current page title should be included in the breadcrumb, but it should not be clickable (not a link), and therefore, it will be presented in a different font colour than the rest links in the breadcrumb.

Customisation

Alternatively, you can use the breadcrumb style below

Code structure


        <div id="breadcrumb">
            <a href="homepage"> Sitename  </a > »
            <a href="item-a">Menu item a </a> »
            Current page title
        </div>