Breadcrumbs

Guidance

Breadcrumbs are navigation that help users understand where they are within a website or application, how they got there, and how to return to previous pages or higher-level categories. Breadcrumbs are used at the top of the page under the main navigation, and most often within hero banners. Breadcrumbs are made up of the following parts:

• Home link: This is the top level of the site hierarchy and typically links to the homepage of the website.
• Separator: This separates the levels of the hierarchy and makes it clear to the user that each item in the breadcrumb represents a different level.
• Breadcrumb list item(s): These represent the levels of the site hierarchy that the user has navigated through to arrive at the current page. Each item in a text link to the corresponding page.
• Current page: This is the final item in the breadcrumb list and represents the page that the user is currently on. It is displayed as plain text and is not clickable.

While it is best practice to use breadcrumbs in your websites and applications, there are scenarios where they can be omitted:

• Complex non-linear workflows
• Single-page applications (SPA)
• Native mobile applications (follow OS-specific patterns instead)
• Single-page websites, and websites with a shallow information hierarchies
• Linear application or transaction process workflows (as to not disrupt the task)
• When the information architecture is confusing or unclear—in this case, focus on improving the overall navigation

Breadcrumbs

Breadcrumbs must always appear at the top of the page under the main navigation.

	<nav aria-label="breadcrumb">
		<ol class="gnb-breadcrumbs">
			<li><a href="#">Home</a></li>
			<li><a href="#">Second level</a></li>
			<li><a href="#">Third level</a></li>
			<li class="active" aria-current="page">Current page</li>
		</ol>
	</nav>

Breadcrumbs in hero banners

When using breadcrumbs within hero banners, we use the .gnb-breadcrumbs-light class.