Generate accessible breadcrumb navigation in seconds. Enter your trail items, pick a separator style and get clean HTML, ready-to-use CSS and a live preview — built with proper ARIA markup for screen readers.
Live preview
How to Use
- Enter your breadcrumb trail, one item per line, from home to the current page.
- Choose a separator style.
- Press Generate breadcrumb — or just type, the preview updates live.
- Copy the HTML and CSS into your site.
Key Features
- Accessible markup — nav landmark, ordered list and aria-current on the active item.
- Four separators — slash, chevron, arrow or dot styles.
- Live preview — see the breadcrumb update as you type.
- 100% private — runs entirely in your browser; nothing is sent or stored.
FAQs
Why use aria-current?
It tells screen readers which item is the current page, which is an accessibility best practice for breadcrumbs.
Can I style it differently?
Yes — the generated CSS is a clean starting point. Adjust colours, spacing and fonts to match your theme.
Should the last item be a link?
No. The current page is rendered as plain text with aria-current="page", which is the recommended pattern.
Is my data sent anywhere?
No. Everything runs entirely in your browser and never transmits or saves your entries.
Related Tools
Try these related tools: CSS Button Generator, CSS Pagination Generator, CSS Tabs Generator.