---
title: "Auto Breadcrumb — Free Framer component · Best of Framer"
description: "Free Framer component · by Till Janek · Navigation. Auto Breadcrumb automatically generates clean, fully functional breadcrumbs directly from your site’s URL."
canonical: "https://framer.elliotli.dev/component/auto-breadcrumb"
---

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

# Auto Breadcrumb

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

![Auto Breadcrumb preview image 1](https://framer.elliotli.dev/og/component/auto-breadcrumb/017d0bd28732417e/1600x1200.jpg)

## Summary

Auto Breadcrumb automatically generates clean, fully functional breadcrumbs directly from your site’s URL.

## Description

Auto Breadcrumb automatically generates clean, fully functional breadcrumbs directly from your site’s URL. It helps users understand where they are on your website while keeping navigation clear, flexible and fast to set up.

The component updates automatically with your page structure and adapts to long URLs by collapsing steps when needed. You can also manually control how many breadcrumb items are visible to match your layout and design needs.

**Features**

-   Automatically generates breadcrumbs from the site’s URL
    
-   Automatically collapses breadcrumbs when the URL gets too long
    
-   Option to manually define the maximum number of visible steps
    

**Customize**

-   Separator text or custom SVG with full color control
    
-   Gap between breadcrumb steps
    
-   Home label text
    
-   Truncation for long labels by setting a maximum character count
    
-   Default, hover and current states
    
-   Custom font support
    
-   Turn on/off user select
    
-   Padding, background and corner radius per step to create tag-like visuals
    

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

-   All · #1787

## Details

- **Author**: Till Janek
- **Published**: 2025-12-22
- **Updated**: 2025-12-22
- **Added**: 2025-12-15
- **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