Documentation
What it does
It reads the current URL and builds the trail from it — so a page at products, then subcategory, then item shows all three levels without you setting anything.
Add it once to a layout template and every page underneath gets a correct breadcrumb.
Where you would use it
Ideal for shops, documentation, blogs, and any site with deep pages.
Controls
24 controls, 6 of which only appear when they are relevant.
Control | Type | Default | Notes |
|---|---|---|---|
Canvas Path | String |
| Sample path shown on the canvas. The published site always uses the real URL. |
Home | Boolean |
| — |
Home Label | String |
| conditional |
Labels | Boolean |
| Format turns "summer-collection" into "Summer Collection". |
Max Chars | Number |
| 0–60 · Truncates long labels. 0 disables truncation. |
Collapse | Enum | Auto / Manual / Off — default | Auto hides middle steps when the row overflows. Manual limits the visible steps. |
Max Steps | Number |
| 2–10 · conditional |
Font | Font |
| — |
Gap | Number |
| 0–48px |
Separator | Enum | Text / Icon — default | — |
Character | String |
| conditional |
Preset | Enum | Chevron / Arrow / Dot / Slash / Custom SVG — default | conditional |
SVG File | File | — | conditional |
Icon Size | Number |
| 4–48px · conditional |
Sep. Color | Color |
| — |
Color | Color |
| — |
Fill | Color | — | — |
Color | Color |
| — |
Fill | Color | — | — |
Color | Color |
| — |
Fill | Color | — | — |
Step Padding | Padding |
| — |
Step Radius | BorderRadius |
| — |
Text Select | Boolean |
| — |
Working through the panel
Designing it on the canvas
There's one control that exists purely for the editor, and it confuses people: Canvas Path.
On the live site the component reads the real URL. But on the Framer canvas there is no URL, so it would have nothing to show. Canvas Path is a fake path you type in so you can see and style the component while designing.
It has no effect on the published site. Set it to a deep path — three or four levels — so you're designing against the worst case rather than a two-item trail.
The trail
Home adds a first step for the site root, with its own label.
Labels turns URL segments into readable text — so a slug becomes a title-cased phrase instead of a hyphenated string. Max Chars truncates long ones.
Collapse handles deep paths: Auto hides the middle when the trail gets long, Manual lets you set the limit with Max Steps, and Off always shows everything.
Auto is right for most sites. A breadcrumb that wraps onto two lines has stopped being a breadcrumb.
Separators and states
Separator is text or icon. Text takes any character. Icon gives you chevron, arrow, dot, slash, or your own SVG file, with a size and colour.
Then three state groups, each with a colour and a fill: Default for the steps behind you, Hover, and Current for the page you're on.
The fills are what let you build breadcrumbs as pills rather than plain text — combined with Step Padding and Step Radius.
And Text Select is off by default, which stops the trail being selectable. Navigation isn't content anyone needs to copy.
Performance and limits
Static rendering is handled, so canvas thumbnails and exports show a settled frame rather than a blank box.
Good to know
No setup or coding required. Responsive across desktop, tablet, and mobile.
Refund policy — due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.
Support: hi@alicorak.com
