Breadcrumbs
Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".
Variations
Elevated Breadcrumbs
Copy as:
copydone
<!-- Component: Elevated basic breadcrumb -->
<nav aria-label="Breadcrumb">
<ol class="flex items-stretch gap-2 px-4 list-none rounded shadow-md h-14 shadow-slate-200 bg-white">
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-01 description-01" role="graphics-symbol">
<title id="title-01">Arrow</title>
<desc id="description-01">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Projects</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-02 description-02" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">UI components</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-03 description-03" role="graphics-symbol">
<title id="title-03">Arrow</title>
<desc id="description-03">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center flex-1 gap-2">
<a href="#" aria-current="page" class="pointer-events-none max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-400">Project</a>
</li>
</ol>
</nav>
<!-- End Elevated basic breadcrumb -->Elevated Breadcrumbs with Leading Icon
Copy as:
copydone
<!-- Component: Elevated breadcrumb with leading icon -->
<nav aria-label="Breadcrumb">
<ol class="flex items-stretch gap-2 px-4 list-none rounded shadow-md h-14 shadow-slate-200 bg-white">
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-01 description-01" role="link">
<title id="title-01">Home</title>
<desc id="description-01">
Home button indicating the homepage of the website.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-02 description-02" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Projects</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-03 description-03" role="graphics-symbol">
<title id="title-03">Arrow</title>
<desc id="description-03">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">UI components</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-04 description-04" role="graphics-symbol">
<title id="title-04">Arrow</title>
<desc id="description-04">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center flex-1 gap-2">
<a href="#" aria-current="page" class="pointer-events-none max-w-[20ch] truncate whitespace-nowrap text-slate-400">Project</a>
</li>
</ol>
</nav>
<!-- End Elevated breadcrumb with leading icon -->Elevated Breadcrumbs with Leading Icon & Text
Copy as:
copydone
<!-- Component: Elevated breadcrumb with text & leading icon -->
<nav aria-label="Breadcrumb">
<ol class="flex items-stretch gap-2 px-4 list-none rounded shadow-md h-14 shadow-slate-200 bg-white">
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-01 description-01" role="link">
<title id="title-01">Home</title>
<desc id="description-01">
Home button indicating the homepage of the website.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span class="hidden md:block">Home</span>
</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-02 description-02" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Projects</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-03 description-03" role="graphics-symbol">
<title id="title-03">Arrow</title>
<desc id="description-03">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">UI components</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-04 description-04" role="graphics-symbol">
<title id="title-04">Arrow</title>
<desc id="description-04">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center flex-1 gap-2">
<a href="#" aria-current="page" class="pointer-events-none max-w-[20ch] truncate whitespace-nowrap text-slate-400">Project</a>
</li>
</ol>
</nav>
<!-- End Elevated breadcrumb with text & leading icon -->Flat Breadcrumbs
Copy as:
copydone
<!-- Component: Flat basic breadcrumb -->
<nav aria-label="Breadcrumb">
<ol class="flex items-stretch gap-2 list-none">
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-01 description-01" role="graphics-symbol">
<title id="title-01">Arrow</title>
<desc id="description-01">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Projects</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-02description-02" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">UI components</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-03description-03" role="graphics-symbol">
<title id="title-03">Arrow</title>
<desc id="description-03">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center flex-1 gap-2">
<a href="#" aria-current="page" class="pointer-events-none max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-400">Project</a>
</li>
</ol>
</nav>
<!-- End Flat basic breadcrumb -->Flat Breadcrumbs with Leading Icon
Copy as:
copydone
<!-- Component: Flat breadcrumb with leading icon -->
<nav aria-label="Breadcrumb">
<ol class="flex items-stretch gap-2 list-none">
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-01 description-01" role="link">
<title id="title-01">Home</title>
<desc id="description-01">
Home button indicating the homepage of the website.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-02 description-02" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Projects</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-03 description-03" role="graphics-symbol">
<title id="title-03">Arrow</title>
<desc id="description-03">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">UI components</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-04 description-04" role="graphics-symbol">
<title id="title-04">Arrow</title>
<desc id="description-04">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center flex-1">
<a href="#" aria-current="page" class="pointer-events-none max-w-[20ch] truncate whitespace-nowrap text-slate-400">Projesct</a>
</li>
</ol>
</nav>
<!-- End Flat breadcrumb with leading icon -->Flat Breadcrumbs with Leading Icon & Text
Copy as:
copydone
<!-- Component: Flat breadcrumb with text & leading icon -->
<nav aria-label="Breadcrumb">
<ol class="flex items-stretch gap-2 list-none">
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] items-center gap-1 truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-01 description-01" role="link">
<title id="title-01">Home</title>
<desc id="description-01">
Home button indicating the homepage of the website.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span class="hidden md:block">Home</span>
</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-02 description-02" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="items-center hidden gap-2 md:flex">
<a href="#" class="flex max-w-[20ch] truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">Projects</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-03 description-03" role="graphics-symbol">
<title id="title-02">Arrow</title>
<desc id="description-02">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center gap-2">
<a href="#" class="flex max-w-[20ch] truncate whitespace-nowrap text-slate-700 transition-colors hover:text-emerald-500">UI components</a>
<svg xmlns="http://www.w3.org/2000/svg" class="flex-none w-4 h-4 transition-transform stroke-slate-700 md:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true" aria-labelledby="title-04 description-04" role="graphics-symbol">
<title id="title-03">Arrow</title>
<desc id="description-03">
Arrow icon that points to the next page in big screen resolution sizes
and previous page in small screen resolution sizes.
</desc>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</li>
<li class="flex items-center flex-1 gap-2">
<a href="#" aria-current="page" class="pointer-events-none max-w-[20ch] truncate whitespace-nowrap text-slate-400">Project</a>
</li>
</ol>
</nav>
<!-- End Flat breadcrumb with text & leading icon -->Usage
Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors". On small screens only the last two elements are available. Links length is limited to 20 characters
Specs
Breadcrumbs come in 2 styles (elevated and flat). Text overflow ellipsis is used to prevent overflow on large texts. On smaller screens, only the current and the previous items are shown (to save screen real estate).
- elevated: Elevated look with 3.5rem height, 1rem horizontal padding and 0.375rem (6px) border radius and drop shadow (shadow-md)
- flat: No background or shadow, keeping the height the same as the line height 1.5rem (24px), better fit for minimal designs
Accessibility notes
Breadcrumbs are implemented with a <nav> HTML tag to apply semantic meaning to its use. The markup includes an aria-label="breadcrumbs" to describe the type of navigation. The aria-current="page" role is used for the last element that points to the current page. This will tell assistive technology (AT) devices that the focused link is pointing to the current page.