0
0
Bootsrapmarkup~5 mins

Breadcrumb component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Breadcrumbs help users see where they are on a website. They show the path from the homepage to the current page.

When a website has many pages and levels.
To help users easily go back to previous pages.
To improve website navigation and user experience.
When you want to show the hierarchy of pages clearly.
Syntax
Bootsrap
<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>
Use <nav> with aria-label="breadcrumb" for accessibility.
The last <li> has class active and aria-current="page" to show the current page.
Examples
A simple breadcrumb with two levels: Home and Dashboard (current page).
Bootsrap
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
  </ol>
</nav>
A breadcrumb with four levels showing a deeper page path.
Bootsrap
<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"><a href="#">Data</a></li>
    <li class="breadcrumb-item active" aria-current="page">Reports</li>
  </ol>
</nav>
Sample Program

This example shows a breadcrumb navigation bar with three levels. The last item is the current page and is not a link.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Breadcrumb Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <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>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Breadcrumbs improve navigation but should not replace main menus.

Always use aria-current="page" on the current breadcrumb for screen readers.

Bootstrap automatically styles breadcrumbs with spacing and separators.

Summary

Breadcrumbs show the user's location on a website.

Use Bootstrap's breadcrumb classes inside a <nav> for accessibility.

The current page breadcrumb has the active class and aria-current="page".