Breadcrumb

The problem it solves

People often land deep inside a site from a search result or a shared link, without passing through its home page or menus. Once there, they cannot see where the page sits or how to reach related pages. A breadcrumb shows the path from the top of the site to the current page and makes each level a link, so people can orient themselves and move up without the back button.

When to use it

• The site has a clear hierarchy of three or more levels, such as category, subcategory and item.
• Many visitors arrive on deep pages from search or links.
• People often want to widen their view, for example from one product to its whole category.

When not to use it

• Do not use it on a flat site with one or two levels. The trail repeats what the main navigation already says.
• Do not use it as a history trail of pages visited. That is what the back button does, and a breadcrumb that changes with each visit confuses people.
• Do not let it replace the main navigation. It is a secondary aid.

How to build it

Placement and content

Put the breadcrumb near the top of the page, above the title, where people look when they arrive. Start with the home page or the top section, list each level in order, and end with the current page. Show the current page as plain text, not as a link to itself. Use the page names people see in the navigation, and keep the separator simple, such as a slash or a chevron.

Accessibility

• Wrap the trail in a nav element with an accessible name such as "Breadcrumb".
• Mark the current page with aria-current="page".
• Keep the separators out of what screen readers announce, for example by drawing them with CSS.

On small screens

Long trails wrap or overflow on phones. Show the parent level as a single "Back to Settings" link (named after the parent section), or truncate the middle levels, rather than letting the trail push the title down.

Structured data

Mark the trail up with schema.org BreadcrumbList so search engines can show the path in results.