Skip to main content
Logo USWDS + Tailwind

Breadcrumb

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

Usage

A breadcrumb shows the location of the current page in the site structure. It’s like a path from the current page back to the home page, showing each level of organization in-between. Breadcrumbs allow a user to navigate “up” to a parent section instead of “Back” to the previous page. Use breadcrumbs to help users navigate and understand the organization of your site.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Twig 
<nav aria-label="Breadcrumbs" class="@container">
	<ol class="list-none truncate p-2 -mx-1 block">
		{% for breadcrumb in breadcrumbs %}
			{% if not loop.last %}
				<li class="inline-flex sr-only @mobile-lg:not-sr-only @mobile-lg:whitespace-nowrap">
					<a href="{{- breadcrumb.slug -}}" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">
						<span>{{- breadcrumb.label -}}</span>
					</a>
					<span aria-hidden="true" class="hidden @mobile-lg:inline">
						<span class="icon-[material-symbols--chevron-right] align-middle text-gray-50 size-4"></span>
					</span>
				</li>
			{% else %}
				<li class="inline-flex">
					<span aria-hidden="true" class="@mobile-lg:hidden">
						<span class="icon-[material-symbols--arrow-back] align-middle text-gray-50 size-4"></span>
					</span>
					<a href="{{- breadcrumb.slug -}}" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">
						<span>{{- breadcrumb.label -}}</span>
					</a>
					<span aria-hidden="true" class="hidden @mobile-lg:inline">
						<span class="icon-[material-symbols--chevron-right] align-middle text-gray-50 size-4"></span>
					</span>
				</li>
			{% endif %}
		{% endfor %}
		<li class="inline sr-only @mobile-lg:not-sr-only @mobile-lg:whitespace-nowrap">
			<span role="link" aria-disabled="true" aria-current="page">Economically disadvantaged women-owned small business federal contracting program</span>
		</li>
	</ol>
</nav>

Wrapping

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Twig 
<nav aria-label="Breadcrumbs" class="@container leading-snug">
	<ol class="list-none p-2 -mx-1 block">
		{% for breadcrumb in breadcrumbs %}
			{% if not loop.last %}
				<li class="inline-flex sr-only @mobile-lg:not-sr-only">
					<a href="{{- breadcrumb.slug -}}" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">
						<span>{{- breadcrumb.label -}}</span>
					</a>
					<span aria-hidden="true" class="hidden @mobile-lg:inline">
						<span class="icon-[material-symbols--chevron-right] align-middle text-gray-50 size-4"></span>
					</span>
				</li>
			{% else %}
				<li class="inline-flex">
					<span aria-hidden="true" class="@mobile-lg:hidden">
						<span class="icon-[material-symbols--arrow-back] align-middle text-gray-50 size-4"></span>
					</span>
					<a href="{{- breadcrumb.slug -}}" class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline focus:outline-4 focus:outline-blue-40v underline">
						<span>{{- breadcrumb.label -}}</span>
					</a>
					<span aria-hidden="true" class="hidden @mobile-lg:inline">
						<span class="icon-[material-symbols--chevron-right] align-middle text-gray-50 size-4"></span>
					</span>
				</li>
			{% endif %}
		{% endfor %}
		<li class="inline sr-only @mobile-lg:not-sr-only">
			<span role="link" aria-disabled="true" aria-current="page">Economically disadvantaged women-owned small business federal contracting program</span>
		</li>
	</ol>
</nav>

Component API

Breadcrumbs are made up of the following elements:

Root

  • Use a <nav> as the root element. This allows assistive technology to present the breadcrumbs in context as a navigational element on the page.

  • aria-label

    Default: 'Breadcrumb'

    Provide a label that describes the type of navigation provided in the nav element.

List

  • <ol>

    Use an <ol> for breadcrumb lists. This allows assistive technology to enumerate the items in the breadcrumbs and allows shortcuts between list items.

List Item

  • <li>

    Use an <li> for breadcrumb list items. This allows assistive technology to enumerate the items in the breadcrumbs and allows shortcuts between list items.

  • <a> or <span>

    Use an <a> element when breadcrumb items are clickable. Every item, except for the current page (in our case the last item), represented in the breadcrumb should use an <a> element.

    Use a <span> for the item in a breadcrumb represents the current page. This element is not clickable. Combine this element with the attributes below to create an accessible “current page” breadcrumb item.

  • Allows screen readers to communicate the breadcrumb item as if it were a link.

    Only use role="link" on the element describing the current page.

  • aria-current="page"

    Allows screen readers to communicate that the element represents a link to the current page.

    Only use the aria-current attribute on the element describing the current page.

  • aria-disabled="true"

    Allows screen readers to communicate that the element is not clickable.

    Only use aria-disabled="true" on element describing the current page.

Seperator

  • aria-hidden="true"

    Hide separators from screen readers by using aria-hidden="true". Separators between breadcrumb items should not be read by screen readers.

Accessibility

  • Like text, separators must have at least have a contrast ratio of 4.5:1 (WCAG AA) against their background.