OneTaskBy Tim King · Updated
Breadcrumb Generator
Custom Separators, Colours and Optional BreadcrumbList Structured Data for Search
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Breadcrumb Generator works
A breadcrumb generator builds the small trail of links near the top of a page, such as Home › Shop › Shoes, that shows visitors where they are in a site. Enter the trail, pick a separator and copy the accessible HTML, CSS and optional structured data.
Breadcrumbs help visitors who arrive from search on a deep page move up to the wider section in one click, and they show at a glance how the site is organised. They suit shops, documentation and any site with more than two levels of pages.
How the breadcrumb generator stays accessible
The trail is a <nav> with aria-label="Breadcrumb", so screen reader users can find it in the
landmarks list, and the links sit in an ordered list because the order matters. The last item is the
current page, marked with aria-current="page" and left unlinked. The separators are drawn by CSS,
so screen readers do not read out a string of slashes or arrows.
Structured data
With structured data turned on, the code includes a BreadcrumbList block in JSON-LD. Search engines
can use it to show the trail in place of the raw URL in results. Use full absolute URLs so the data
is valid; the current page does not need one.
FAQ
Do breadcrumbs still help SEO?
They help search engines understand how pages relate and they add internal links to parent pages. Google may show the trail in results when the structured data is valid, although it decides when to display it. The bigger gain is usually for visitors, who find their way around more easily.
Should the current page be a link?
No. A link to the page you are already on does nothing useful and confuses screen reader users. The
generator shows it as plain text with aria-current="page", which tells assistive technology it is
the current location.
Which separator should I use?
Any works, because the separator is decoration drawn by CSS. A chevron or slash is the most common and is recognised at once. Keep it low contrast so the links, not the separators, draw the eye.
Why does my link not appear in the trail?
Only links starting with http, https, a slash or a hash are kept, so unsafe or mistyped addresses become a hash link instead. Check the URL after the bar on each line and make sure it starts with one of those.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Mobile Menu
Build a responsive hamburger menu with an animated icon and panel.
Schema.org Markup Generator
Generate JSON-LD for Organization, Person, WebSite, Event, Video and Software types.
Tabs Builder
Build accessible tabs with arrow key support and three styles.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.