Breadcrumbs and Pagination

🧭 Bootstrap Navigation Components: Breadcrumbs & Pagination

The Trail of Crumbs Story 🍞

Imagine you’re exploring a magical forest. As you walk deeper, you drop tiny breadcrumbs behind you. These crumbs help you remember where you came from and find your way back home!

That’s exactly what Breadcrumbs do on websites! They show you the path you took to get to where you are now.

And Pagination? Think of it like pages in your favorite storybook. You can’t read all 100 pages at once, so you flip through them one by one!

🍞 Breadcrumb: Your Website’s Trail

A breadcrumb shows your location in a website. It’s like leaving a trail so you never get lost!

What Does It Look Like?

Home > Products > Toys > Action Figures

You can click any part to go back to that section!

The Code

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

🌟 Key Points

• Use <nav> with aria-label="breadcrumb" for screen readers
• Items go inside <ol class="breadcrumb">
• Each step is a <li class="breadcrumb-item">
• The last item gets active class (no link - you’re already here!)

✂️ Breadcrumb Dividers: Change the Arrow!

By default, breadcrumbs use / between items. But you can change this!

Using CSS Variables

.breadcrumb {
  --bs-breadcrumb-divider: '>';
}

Now it shows: Home > Products > Toys

Using Fancy Symbols

.breadcrumb {
  --bs-breadcrumb-divider: '→';
}

Result: Home → Products → Toys

Using an Icon (SVG)

.breadcrumb {
  --bs-breadcrumb-divider: url("data:image/svg+xml,...");
}

Remove Divider Completely

.breadcrumb {
  --bs-breadcrumb-divider: '';
}

Result: Home Products Toys (no arrows!)

📖 Pagination: Flipping Through Pages

When you have LOTS of items (like 1000 products), you split them into pages. Pagination helps users navigate between these pages!

Basic Pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
  </ul>
</nav>

🌟 Structure

graph TD
    A["nav with aria-label"] --> B["ul.pagination"]
    B --> C["li.page-item"]
    C --> D["a.page-link"]
    D --> E["Page Number or Icon"]

⬅️➡️ Pagination with Icons

Add Previous and Next buttons with arrows!

With Arrow Symbols

<ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#">
      &laquo;
    </a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">
      &raquo;
    </a>
  </li>
</ul>

Icon Reference

With Text Labels

<li class="page-item">
  <a class="page-link" href="#">
    <span aria-hidden="true">&laquo;</span>
    Previous
  </a>
</li>

🚫✅ Disabled and Active States

Active State (Current Page)

Show which page you’re on:

<li class="page-item active">
  <a class="page-link" href="#">2</a>
</li>

The number 2 will be highlighted!

Disabled State (Can’t Click)

Disable navigation when there’s nowhere to go:

<li class="page-item disabled">
  <a class="page-link" href="#">
    Previous
  </a>
</li>

Real Example

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link">Previous</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">Next</a>
  </li>
</ul>

💡 Pro Tip: On page 1, disable “Previous”. On the last page, disable “Next”!

📏 Pagination Sizing

Make your pagination bigger or smaller!

Large Size

<ul class="pagination pagination-lg">
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
</ul>

Small Size

<ul class="pagination pagination-sm">
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
</ul>

Size Comparison

🎯 Pagination Alignment

Position your pagination left, center, or right!

Left Aligned (Default)

<ul class="pagination">
  <!-- pages here -->
</ul>

Center Aligned

<ul class="pagination justify-content-center">
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
</ul>

Right Aligned

<ul class="pagination justify-content-end">
  <li class="page-item">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
</ul>

Alignment Classes

graph TD
    A["Pagination Alignment"] --> B["justify-content-start"]
    A --> C["justify-content-center"]
    A --> D["justify-content-end"]
    B --> E["⬅️ Left"]
    C --> F["⬅️➡️ Center"]
    D --> G["➡️ Right"]

🎉 Putting It All Together

Here’s a complete example with everything we learned:

<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Shop</a>
    </li>
    <li class="breadcrumb-item active">
      Page 2
    </li>
  </ol>
</nav>

<!-- Pagination -->
<nav aria-label="Page navigation">
  <ul class="pagination
             justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">&laquo;</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">&raquo;</a>
    </li>
  </ul>
</nav>

🧠 Remember This!

🚀 You Did It!

Now you know how to:

• ✅ Create breadcrumb trails
• ✅ Customize dividers
• ✅ Build pagination controls
• ✅ Add icons to navigation
• ✅ Handle disabled/active states
• ✅ Change sizes
• ✅ Align everything perfectly

Go build amazing navigation for your users! 🎯