Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Breadcrumb in Bootstrap 5
Breadcrumb: Navigation component that indicates the current page"s location within a navigational hierarchy.
Basic Breadcrumb
Indicate the current page"s location within a navigational hierarchy that automatically adds separators.
<!-- Basic Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>Breadcrumb with Icons
<!-- Breadcrumb with Icons -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
<i class="bi bi-house-door"></i> Home
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="bi bi-gear"></i> Settings
</li>
</ol>
</nav>Breadcrumb Styles
Custom Background
With Divider
Custom Dividers
Customize the separator by modifying the CSS variable or with an inline style attribute.
<!-- Custom Divider -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<!-- Using custom CSS -->
<style>
.breadcrumb-custom {
--bs-breadcrumb-divider: '→';
}
</style>Breadcrumb with Background
Breadcrumb in Cards
Security Settings
Manage your security preferences and password settings.
Responsive Breadcrumb
Tip: Use
.flex-nowrap and .overflow-auto for long breadcrumb trails on small screens.Breadcrumb with Truncation
<!-- Truncated Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" class="text-truncate" style="max-width: 100px;">
Long category name
</a>
</li>
<li class="breadcrumb-item active text-truncate" style="max-width: 120px;" aria-current="page">
Very long current page title
</li>
</ol>
</nav>Practical Examples
Example: E-commerce
iPhone 15 Pro Max
Latest smartphone with advanced features.
Example: Admin Dashboard
Edit User Profile
Update user information and permissions.
Accessibility
Accessibility Best Practices
- Always include
aria-label="breadcrumb"on the nav element - Use
aria-current="page"on the current page item - Ensure breadcrumb links are keyboard navigable
- Maintain sufficient color contrast for text
- Consider screen reader users when using custom dividers
- Provide skip navigation for lengthy breadcrumb trails
Best Practices
Do"s
- ✅ Use for hierarchical navigation
- ✅ Keep breadcrumb trail concise
- ✅ Highlight current page clearly
- ✅ Make all items except current page clickable
- ✅ Use appropriate aria labels
- ✅ Consider mobile responsiveness
Don"ts
- ❌ Don"t use for primary navigation
- ❌ Avoid too many levels (max 3-5 recommended)
- ❌ Don"t make current page clickable
- ❌ Avoid using breadcrumb on single-level sites
- ❌ Don"t forget mobile truncation for long text
- ❌ Don"t omit accessibility attributes
Custom CSS Examples
Custom Breadcrumb Styles
/* Custom breadcrumb styles */
.breadcrumb-custom {
--bs-breadcrumb-divider: '›';
background-color: #f8f9fa;
border-radius: 0.375rem;
padding: 0.75rem 1rem;
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
color: #6c757d;
font-weight: bold;
}
.breadcrumb-custom .breadcrumb-item.active {
color: #495057;
font-weight: 600;
}
/* Dark theme breadcrumb */
.breadcrumb-dark {
--bs-breadcrumb-divider-color: #adb5bd;
background-color: #343a40;
}
.breadcrumb-dark .breadcrumb-item a {
color: #dee2e6;
}
.breadcrumb-dark .breadcrumb-item.active {
color: #fff;
}