Breadcrumb component in Bootsrap

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>

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".

Practice

1. What is the main purpose of a Bootstrap breadcrumb component on a website?

easy

A. To create a navigation menu with dropdowns

B. To add buttons for form submission

C. To display images in a carousel format

D. To show the user's current location within the website's page hierarchy

Solution

1. Step 1: Understand breadcrumb purpose

   Breadcrumbs help users know where they are on a website by showing the path they took.

2. Step 2: Match purpose with options

   Only To show the user's current location within the website's page hierarchy describes showing the user's location in the page hierarchy.

3. Final Answer:

   To show the user's current location within the website's page hierarchy -> Option D

4. Quick Check:

   Breadcrumb = User location path [OK]

Hint: Breadcrumbs show navigation path, not menus or buttons [OK]

Common Mistakes:

• Confusing breadcrumbs with navigation menus
• Thinking breadcrumbs are for images or buttons

2. Which of the following is the correct HTML structure to start a Bootstrap breadcrumb for accessibility?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify Bootstrap breadcrumb container

   Bootstrap requires a
   with aria-label="breadcrumb" and an ordered list

   with class "breadcrumb".

2. Step 2: Compare options with correct structure

   Only
   uses
   and

   correctly.

3. Final Answer:

   <nav aria-label="breadcrumb"><ol class="breadcrumb"></ol></nav> -> Option A

4. Quick Check:

   Use <nav aria-label="breadcrumb"> + <ol class="breadcrumb"> [OK]

Hint: Breadcrumb uses

and

[OK]

Common Mistakes:

• Using <ul> instead of <ol>
• Missing aria-label for accessibility
• Using <div> instead of <nav>

3. Given this Bootstrap breadcrumb code, what will be the visual output in the browser?

<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>

medium

A. Breadcrumb items are displayed as a vertical list

B. All breadcrumb items are clickable links

C. A breadcrumb with clickable links 'Home' and 'Library', and 'Data' as plain text showing current page

D. Breadcrumb shows only 'Data' as a link

Solution

1. Step 1: Analyze breadcrumb items

   First two items have class "breadcrumb-item" with links, last item has "active" class and aria-current="page" with no link.

2. Step 2: Understand Bootstrap breadcrumb rendering

   Bootstrap shows clickable links for non-active items and plain text for the active item representing current page.

3. Final Answer:

   A breadcrumb with clickable links 'Home' and 'Library', and 'Data' as plain text showing current page -> Option C

4. Quick Check:

   Active item = plain text, others = links [OK]

Hint: Active breadcrumb is plain text, others are links [OK]

Common Mistakes:

• Assuming active item is a link
• Thinking breadcrumb is vertical by default
• Assuming all items are clickable

4. Identify the error in this Bootstrap breadcrumb code snippet:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active"><a href="#">Home</a></li>
    <li class="breadcrumb-item">Library</li>
  </ol>
</nav>

medium

A. The <ol> element should be replaced with <ul>

B. The active breadcrumb item should not contain a link and must have aria-current="page"

C. The breadcrumb-item class is missing on the second <li>

D. The <nav> element is missing aria-label

Solution

1. Step 1: Check active breadcrumb rules

   The active breadcrumb item must not be a link and must have aria-current="page" for accessibility.

2. Step 2: Identify errors in code

   The active item has a link and lacks aria-current="page", which is incorrect.

3. Final Answer:

   The active breadcrumb item should not contain a link and must have aria-current="page" -> Option B

4. Quick Check:

   Active item = plain text + aria-current="page" [OK]

Hint: Active breadcrumb = plain text + aria-current="page" [OK]

Common Mistakes:

• Putting a link inside the active breadcrumb item
• Forgetting aria-current="page" on active item
• Using <ul> instead of <ol> for breadcrumb

5. You want to create a breadcrumb with these pages: Home > Products > Electronics > Cameras, where 'Cameras' is the current page. Which code snippet correctly implements this with Bootstrap's breadcrumb component and accessibility best practices?

hard

A.

Home
Products
Electronics
Cameras

B.

Home
Products
Electronics
Cameras

C.

Home
Products
Electronics
Cameras

D.

Home
Products
Electronics
Cameras

Solution

1. Step 1: Check breadcrumb structure and accessibility

   Use
   with

   . Active item must have class "active" and aria-current="page" and be plain text.

2. Step 2: Evaluate each option

   1. Home
   2. Products
   3. Electronics
   4. Cameras
   correctly uses
   ,

   , links for non-active items, and active item with aria-current="page" and no link. Others have errors like missing aria-label, wrong tags, or active item as link.

3. Final Answer:

   Option A code snippet correctly implements Bootstrap breadcrumb with accessibility -> Option A

4. Quick Check:

   Active item = plain text + aria-current="page" + correct container [OK]

Hint: Active breadcrumb: plain text + aria-current="page" inside

[OK]

Common Mistakes:

• Using <ul> instead of <ol>
• Active breadcrumb as a link
• Missing aria-current="page" on active item
• Missing aria-label on <nav>