---
title: "Smart Breadcrumbs"
canonical_url: "https://framerhub.io/components/smart-breadcrumbs"
last_updated: "2026-06-15T14:46:31.482Z"
---

## Smart Breadcrumbs

A powerful breadcrumb component that improves both user navigation and SEO. It automatically generates breadcrumbs based on your Framer project structure or allows manual overrides, while silently injecting JSON-LD schema data to help Google understand your site structure.

## Features

**SEO Optimized**
Automatically injects `BreadcrumbList` Schema.org structured data into the head of your page, improving search engine visibility.

**Auto or Manual Modes**
Let the component generate links automatically based on the URL path, or switch to Manual mode to define custom labels and links.

**Flexible Styling**
Customize every aspect: spacing, colors, fonts, separators (Chevron, Slash, Arrow, or Custom SVG), and hover states. Supports per-side padding for precise control.

## Use Cases

**Blog Navigation** — Help readers understand their position in your content hierarchy while boosting article SEO.

**E-commerce Sites** — Guide shoppers through product categories with clear, clickable paths.

**Documentation Sites** — Provide context in multi-level documentation structures.

**Portfolio Sites** — Navigate between project categories and case studies seamlessly.

![Smart Breadcrumbs Preview](/framerhub/img/components/control/smart-breadcrumbs.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Smart Breadcrumbs in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

Configure the component through the properties panel:

**Mode Settings**

- Auto: Automatically generates breadcrumbs from URL path
- Manual: Define custom labels and links

**Separator Options**

- Chevron, Slash, Arrow, or Custom SVG
- Adjustable size and color

**Styling**

- Container: padding (per-side support), background, border, shadow
- Links: font, padding (per-side support), colors, hover/active states

### Quick Tips

**Canvas Preview** — In Auto mode, use the "Preview Path" setting to simulate different URL paths while designing.

**Custom Separators** — Paste any SVG code into the Custom option for unique separator icons.

**Hover States** — Configure distinct hover colors to improve interactivity and user feedback.

**Performance** — The JSON-LD schema is only injected in Preview/Live mode, not on the canvas.

**Per-Side Padding** — Toggle padding controls to set individual values for top, right, bottom, and left sides.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Smart Breadcrumbs combines beautiful, customizable navigation with built-in SEO benefits. No need for separate schema plugins or manual JSON-LD coding—just drop it in and your breadcrumbs work for both users and search engines.