Build an accessible breadcrumb navigation trail. Edit the items, pick a separator and colors, preview it live, then copy clean HTML and CSS.
Breadcrumbs help visitors understand where they are and back out one step at a time, and they can even earn a rich search-result trail in Google.
Type one breadcrumb label per line and the trail updates live.
The current page is marked with aria-current, not linked to itself.
Get ready-to-use HTML and CSS with no extra classes to clean up.
Breadcrumb navigation borrows its name from the fairy tale trail of crumbs left to find a way back home, and it does something similar on the web: it shows a visitor the chain of pages between the homepage and where they currently are, and lets them jump back to any step in one click. Beyond usability, a properly marked-up breadcrumb trail is also read by search engines and can appear directly in search results below your page title, which makes clean, semantic markup worth getting right rather than styling a row of plain divs.
Wrapping the trail in a <nav aria-label="Breadcrumb"> lets assistive technology identify and skip to it as a distinct navigation region.
The last item should not be a link. Use aria-current="page" on it so screen readers and search engines know it's the active location.
Generating the separator with a CSS ::after rule keeps it out of the accessible name, so it isn't read aloud between every item.
Search engines can render your breadcrumb trail in results when the same hierarchy is also described with BreadcrumbList structured data.
A breadcrumb trail is a secondary navigation pattern that shows a user's location within a site's hierarchy, from the homepage down to the current page, usually separated by symbols like › or /.
No. The current page should be plain text marked with aria-current="page" rather than a clickable link, since linking to the page a user is already on adds no value and can confuse assistive technology.
Yes. The generated HTML uses a nav element with aria-label="Breadcrumb" wrapping an ordered list, and marks the current page with aria-current="page" so screen readers announce it correctly.
Yes. Choose between a chevron, slash, arrow or dot separator, and the generated CSS updates automatically using a single ::after rule.
Yes, it is completely free with no signup. Your breadcrumb settings are optionally saved to your browser's local storage only, so nothing is sent to a server.
Keep building your site's navigation with these free online tools.