Breadcrumbs – Design Portal

Breadcrumbs are a secondary navigation aid that helps users easily understand the relation between their location on a page (eg. a product page) and higher level pages (eg. a category page).

Demo

<nav aria-label="Breadcrumb Links">
	<div class="flex items-center divider mb-3 xl:mb-4 overflow-x-scroll md:overflow-x-visible" data-track-gtm="Breadcrumbs">
		<div itemscope="" itemtype="https://schema.org/BreadcrumbList" class="flex flex-nowrap">
			<div itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem" class="hidden print:block md:block breadcrumb-item mr-8 relative whitespace-nowrap">
				<a class="text-primary hover:text-royal-blue" itemprop="item" href="https://www.howstuffworks.com/"><span itemprop="name"> HowStuffWorks</span></a>
				<meta itemprop="position" content="1">
			</div>
			<div itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem" class=" breadcrumb-item mr-8 relative whitespace-nowrap">
				<a class="text-primary hover:text-royal-blue" itemprop="item" href="https://science.howstuffworks.com/"><span itemprop="name"> Science</span></a>
				<meta itemprop="position" content="2">
			</div>
			<div itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem" class=" breadcrumb-item mr-8 relative whitespace-nowrap">
				<a class="text-primary hover:text-royal-blue" itemprop="item" href="https://science.howstuffworks.com/environmental"><span itemprop="name"> Environmental Science</span></a>
				<meta itemprop="position" content="3">
			</div>
		</div>
	</div>
</nav>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

Anatomy

Breadcrumbs
Breadcrumb home link
Breadcrumb main category link
Breadcrumb sub category link