Breadcrumbs generator
Breadcrumbs orient users inside deep record hierarchies (Account → Opportunity → Quote). Style link color, separator and the current-page treatment so the trail is easy to scan.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-breadcrumbs class="studio-breadcrumbs">
<lightning-breadcrumb label="Home" onclick={handleNavigate}></lightning-breadcrumb>
<lightning-breadcrumb label="Accounts" onclick={handleNavigate}></lightning-breadcrumb>
<lightning-breadcrumb label="Acme Corp"></lightning-breadcrumb>
</lightning-breadcrumbs>
</template>Design tips for breadcrumbses
- Always style the last crumb (current page) as non-clickable and visually distinct from the links before it.
- Keep separators low-contrast — they are wayfinding punctuation, not content.
- Truncate long crumb labels rather than letting the trail wrap to a second line.
Related components
Components developers commonly compare against or pair with Breadcrumbs.