Breadcrumb Generator
Build a breadcrumb trail — crumbs with labels and links, a chosen separator, a home icon, collapsing of long trails behind an ellipsis, a non-linked current page with aria-current, and a theme — with a live preview and HTML + CSS + JS output, schema.org BreadcrumbList JSON-LD, or a React / Vue / Tailwind component.
What this tool does
It builds the markup, styles and (optional) JavaScript for a breadcrumb navigation and renders it live.
Defining crumbs
One per line: Label | /href. The last crumb is the
current page — it is rendered as plain text with
aria-current="page" and no link.
Separator
Slash, chevron, arrow, middle dot, or any custom character or short
string. The separator is decorative and marked
aria-hidden.
Collapsing
Turn on collapsing and a long trail shows the first crumb, an ellipsis button, then the last one or two — clicking the ellipsis expands the full path (no JS needed for the static form; a tiny toggle for the interactive one).
Rich results
The JSON-LD output is a BreadcrumbList block for your
page <head> so search engines can show the trail
under your result.
Output
HTML + CSS (+ JS for the toggle), JSON-LD, or React / Vue / Tailwind.
Privacy
Everything runs in your browser. Nothing is uploaded.