Breadcrumb navigation helps both users and search engines understand where a page sits in your site’s structure — and Google can even replace the raw URL in search results with your breadcrumb trail, if valid structured data is present. This tool generates both the accessible HTML and the matching JSON-LD in one step.
What Is the Breadcrumb Generator?
List your page trail as “Name | URL” pairs, one per line, and the tool instantly builds an accessible <nav> breadcrumb with proper aria-current handling for the current page, plus a matching schema.org BreadcrumbList JSON-LD block ready to paste into your <head>.
How to Use It
- Open the tool at /tools/breadcrumb-generator.
- Enter each breadcrumb level as
Name | URL, one per line, in order from home to current page. - Check the live preview to confirm the trail looks right.
- Copy the HTML for your page’s navigation and the JSON-LD for your
<head>.
Key Features
- Accessible HTML output, using
aria-current="page"on the current (non-linked) breadcrumb item. - Valid schema.org BreadcrumbList JSON-LD, generated automatically from the same list.
- Live preview, showing exactly how the breadcrumb trail will render.
- Simple plain-text input format — no JSON or markup required to use the tool.
When to Use This Tool
- Adding breadcrumb navigation to a new page template and want both the visible nav and the structured data at once.
- Improving how your pages appear in search results, since Google can display breadcrumbs instead of a raw URL path.
- Auditing an existing breadcrumb implementation by quickly generating a reference version to compare against.
Try It Now
Open Breadcrumb Generator directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the Generators collection on WebdevToolbox — free, browser-based developer tools with no login required.