Your Business Name
Skip to main content

Breadcrumbs - Show the Path

SEO-friendly navigation breadcrumbs with automatic schema markup. Shows users where they are in your site hierarchy.

See ExamplesAll UI Components

What Are Breadcrumbs?

Breadcrumbs show the navigation path from home to the current page. They help users understand site structure and provide quick navigation back to parent pages. Plus, they include BreadcrumbList schema markup that Google displays in search results.

As of the recent refactor, breadcrumbs are now integrated directly into the Hero component for consistent positioning at the absolute top of pages.

Live Examples

Basic Breadcrumbs

Simple navigation path with home link included automatically

Deep Navigation Path

Handles multiple levels of hierarchy

Without Home Link

Optional: exclude home link if not needed

How to Use Breadcrumbs

Via Hero Component (Recommended)

The easiest way to add breadcrumbs is through the Hero component: 

---
import Hero from '@theme/components/sections/Hero.astro';
---

<Hero
  variant="centered"
  heading="Page Title"
  description="Page description"
  breadcrumbs={[
    { title: 'Features', href: '/features/' },
    { title: 'Components', href: '/features/components/' },
    { title: 'Current Page', href: '/features/components/breadcrumbs/' },
  ]}
/>

Standalone Usage

You can also use breadcrumbs independently: 

---
import Breadcrumbs from '@theme/components/ui/Breadcrumbs.astro';
---

<Breadcrumbs
  items={[
    { title: 'Features', href: '/features/' },
    { title: 'Components', href: '/features/components/' },
  ]}
/>

Props Reference

  • items - Array of breadcrumb items (required)
  • items[].title - Display text for breadcrumb
  • items[].href - Link URL for breadcrumb
  • includeHome - Include home link? (default: true)
  • schema - Include BreadcrumbList schema? (default: true)
  • noContainer - Skip container wrapper? (default: false)

SEO Benefits

Breadcrumbs automatically include BreadcrumbList schema markup that:

  • Displays navigation path in Google search results
  • Helps search engines understand site structure
  • Improves click-through rates from search
  • Provides better user experience

Breadcrumbs Features

SEO Optimized

BreadcrumbList schema markup included

Home Link

Automatic home link (optional)

Accessible

Semantic HTML with ARIA labels

Theme Aware

Adapts to color scheme

Ready to Use Breadcrumbs?

Add navigation context to every page with SEO-friendly breadcrumbs.

All UI Components Back to Components