---
title: "Auto Breadcrumbs — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Navigation. Breadcrumbs that build themselves"
canonical: "https://framer.elliotli.dev/component/auto-breadcrumbs"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Auto Breadcrumbs

# Auto Breadcrumbs

Breadcrumbs that build themselves

[View on Framer](https://framer.com/marketplace/components/auto-breadcrumbs/?via=elliot-li)

![Auto Breadcrumbs preview image 1](https://framer.elliotli.dev/og/component/auto-breadcrumbs/5bf0c31b4b6c7dbd/1600x1200.jpg)

## Summary

Breadcrumbs that build themselves

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

Breadcrumbs that build themselves. Auto Breadcrumb reads the page's URL and generates a clean, clickable trail automatically — no manual linking, no per-page setup. Ideal for shops, documentation, blogs, and any site with deep pages.

Long paths collapse gracefully, separators are fully customizable, and a canvas preview path lets you design against realistic content.

**How to use**

Drop the component onto your pages — it picks up the current URL on the published site, while the Canvas Path field lets you preview any route while designing. Toggle the Home item and label, automatic label formatting, and a character limit for long segments.

Choose how long trails Collapse — automatic, manual with a max step count, or never — then style it: font, gap, and a Separator that can be a text character or an icon from presets like chevron, arrow, dot, and slash, or your own SVG. Step padding, radius, and colors finish the look.

**Features**

-   Automatic breadcrumbs from the page URL
    
-   No per-page setup or manual links
    
-   Canvas preview path for designing
    
-   Optional Home item with custom label
    
-   Automatic label formatting with character limit
    
-   Auto, manual, or no collapsing for long paths
    
-   Text or icon separators: chevron, arrow, dot, slash, or custom SVG
    
-   Adjustable separator color and icon size
    
-   Step padding and radius for pill-style trails
    
-   Full font and spacing control
    
-   Works in headers, page tops, and article layouts
    
-   Responsive across desktop, tablet, and mobile
    
-   No setup or coding required[](https://breadcrumbs.framer.wiki/)
    

**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](mailto:hi@alicorak.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8304

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-26
- **Updated**: 2026-08-16
- **Added**: 2026-07-26
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation