Breadcrumb Navigation

Breadcrumb Implementation

This breadcrumb navigation helps users understand their current location within your blog's hierarchy and allows for easy navigation to parent categories.

HTML Code

<!-- Breadcrumb Navigation -->
<nav class="breadcrumb" aria-label="Breadcrumb">
    <div class="breadcrumb-item">
        <a href="#">
            <i class="fas fa-home mr-2"></i>Home
        </a>
    </div>
    <div class="breadcrumb-divider">/</div>
    <div class="breadcrumb-item">
        <a href="#">Articles</a>
    </div>
    <div class="breadcrumb-divider">/</div>
    <div class="breadcrumb-item">
        <a href="#">Technology</a>
    </div>
    <div class="breadcrumb-divider">/</div>
    <div class="breadcrumb-item active" aria-current="page">
        How Tech Shapes the Future of Work in 2024
    </div>
</nav>

Tailwind CSS Classes Used

/* Container */
.breadcrumb {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

/* Items */
.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #64748b;
}

/* Active item */
.breadcrumb-item.active {
    color: #3b82f6;
    font-weight: 500;
}

/* Divider between items */
.breadcrumb-divider {
    margin: 0 0.5rem;
    color: #cbd5e1;
}

Implementation Tips

1. Place the breadcrumb near the top of your content, below the navigation but above the page title.

2. Make sure the breadcrumb is consistent across all pages of your blog.

3. Use microdata or ARIA attributes to enhance accessibility.

4. For mobile responsiveness, you might consider truncating long breadcrumb trails.

5. Ensure each breadcrumb item is clickable except for the current page.