Breadcrumbs Implementation for Website

Implementing breadcrumbs

Breadcrumbs show user's path in site hierarchy and improve SEO via Schema.org markup. Google displays breadcrumbs in search results instead of URL.

Laravel: breadcrumbs generator

// config/breadcrumbs.php via diglactic/laravel-breadcrumbs package
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

Breadcrumbs::for('home', fn(BreadcrumbTrail $trail) =>
    $trail->push('Home', route('home'))
);

Breadcrumbs::for('blog', fn(BreadcrumbTrail $trail) => $trail
    ->parent('home')
    ->push('Blog', route('blog'))
);

Breadcrumbs::for('article', fn(BreadcrumbTrail $trail, Article $article) => $trail
    ->parent('blog')
    ->push($article->category->name, route('blog.category', $article->category))
    ->push($article->title)
);

// In template
{{ Breadcrumbs::render('article', $article) }}

Schema.org markup

// resources/views/components/breadcrumbs.blade.php
@if($breadcrumbs = Breadcrumbs::generate('article', $article))
<nav aria-label="Breadcrumbs">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    @foreach($breadcrumbs as $item)
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      @if($item->url)
        <a itemprop="item" href="{{ $item->url }}">
          <span itemprop="name">{{ $item->title }}</span>
        </a>
      @else
        <span itemprop="name">{{ $item->title }}</span>
      @endif
      <meta itemprop="position" content="{{ $loop->iteration }}">
    </li>
    @endforeach
  </ol>
</nav>
@endif

React: component

interface Breadcrumb {
  label: string;
  href?: string;
}

function Breadcrumbs({ items }: { items: Breadcrumb[] }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.label,
      ...(item.href ? { item: window.location.origin + item.href } : {}),
    })),
  };

  return (
    <nav aria-label="Breadcrumbs">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <ol className="breadcrumbs">
        {items.map((item, index) => (
          <li key={index} className="breadcrumb-item">
            {index < items.length - 1 ? (
              <>
                {item.href ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}
                <span aria-hidden className="separator">›</span>
              </>
            ) : (
              <span aria-current="page">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  font-size: 0.875rem;
  color: #6b7280;
}
.breadcrumb-item { display: flex; align-items: center; gap: 0.25rem; }
.breadcrumb-item a { color: inherit; text-decoration: none; }
.breadcrumb-item a:hover { color: #111827; text-decoration: underline; }
[aria-current="page"] { color: #111827; font-weight: 500; }

Implementation time

Breadcrumbs with Schema.org markup for Laravel or React: 0.5–1 day.