Breadcrumbs

Examples

Breadcrumbs are a type of secondary navigation that reveal the user's location in a website. Generally going all the way back to the site homepage.

Usage

Breadcrumbs are particularly useful when users arrive at the site through an external link and don’t start with the homepage. They should show the current location in the hierarchal structure of the site or application, not the session history.

Do:

position breadcrumbs in the top left of the application header
ensure each page link title is short and descriptive of the location it links to
ensure the last item in the breadcrumb is the current page and that it is styled differently from the breadcrumb links
conduct user testing to ensure that your breadcrumbs are intuitive and effective

Avoid:

using breadcrumbs as a replacement for the global or local navigation

References

NN/g Nielson Norman Group
Breadcrumbs - 11 Design Guidelines for Desktop and Mobile

Copy


    <turas-breadcrumb>
        <turas-breadcrumb-item breadcrumb-is-home>
            <a asp-controller="Home" asp-action="Index" asp-area="Home" aria-label="Home"></a>
        </turas-breadcrumb-item>
        <turas-breadcrumb-item>
            <a asp-controller="Home" asp-action="Index" asp-area="Components">Components</a>
        </turas-breadcrumb-item>
        <turas-breadcrumb-item breadcrumb-is-active>
            Breadcrumbs
        </turas-breadcrumb-item>
    </turas-breadcrumb>

Copy


    <nav class="" id="breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb" id="breadcrumbInner">
        <li class="breadcrumb-item  " id="breadcrumbHome">
            <a aria-label="Home" href=""></a>
        </li>
        <li class="breadcrumb-item  ">
            <a href="">Components</a>
        </li>
        <li class="breadcrumb-item active " aria-current="page">
            Breadcrumbs
        </li>
    </ol></nav>

Optional parameters

breadcrumb-is-home - sets the home breadcrumb to display the home icon
(Note: the developer must add aria-label="Home" on the HTML <a> Tag to comply with accessibility)
breadcrumb-is-active - set the active breadcrumb

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the breadcrumb does not trap keyboard focus
check that all interactive elements within the breadcrumb are accessible with a keyboard
check focus is visible
test breadcrumb with screen readers to ensure content is announced as expected

Developer considerations

make sure that the breadcrumb is consistently in the same place on every page
make sure breadcrumb code is semantically correct by using the HTML <NAV> tag for the navigation element for the menu
if you are using the "Home" icon make sure to use aria-label="Home" to let assistive technologies know the purpose of the icon
make sure appropriate ARIA is added such as aria-label="breadcrumbs" this will let assistive technologies know what type of navigation it is
make use of the aria-current="page" attribute to enhance the experience for assistive technologies to let them know they are on the current page

Blockquote

Buttons

Examples

Usage

References

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?