Bootstrap 5 Framework

Breadcrumbs and Pagination

12 min Lesson 24 of 40

Breadcrumbs and Pagination in Bootstrap 5

Bootstrap provides components for breadcrumb navigation and pagination to help users understand their location in a site hierarchy and navigate through pages of content.

1. Basic Breadcrumb

Breadcrumbs show the current page's location within a navigational hierarchy:

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

Note: The aria-label on the nav element and aria-current on the active item improve accessibility for screen readers.

2. Breadcrumb Dividers

Customize the divider between breadcrumb items using CSS variables:

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

<!-- Custom divider (>) -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
    </ol>
</nav>

<!-- Using an icon -->
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
    </ol>
</nav>

<!-- No divider -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
    </ol>
</nav>
        

3. Breadcrumb Styling

Customize breadcrumb appearance with utility classes:

<!-- With background -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-light p-3 rounded">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Products</a></li>
        <li class="breadcrumb-item active">Electronics</li>
    </ol>
</nav>

<!-- Compact version -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Current</li>
    </ol>
</nav>
        

4. Basic Pagination

Create pagination for navigating through pages of content:

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</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="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>
        

5. Pagination with Icons

Use icons for previous and next buttons:

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </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="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
        

Tip: Always include aria-label attributes to make icon-only links accessible to screen readers.

6. Active and Disabled States

Indicate the current page and disable navigation when needed:

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
        </li>
        <li class="page-item active" aria-current="page">
            <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>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>
        

Note: Active items use aria-current="page" and disabled items use aria-disabled="true" and tabindex="-1" for accessibility.

7. Pagination Sizing

Create larger or smaller pagination with sizing classes:

<!-- Large Pagination -->
<nav aria-label="Page navigation">
    <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>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
</nav>

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

<!-- Small Pagination -->
<nav aria-label="Page navigation">
    <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>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
</nav>
        

8. Pagination Alignment

Align pagination using flexbox utilities:

<!-- Center Aligned -->
<nav aria-label="Page navigation">
    <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>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
</nav>

<!-- Right Aligned -->
<nav aria-label="Page navigation">
    <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>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
</nav>
        

9. Complete Pagination Example

A full-featured pagination with all states:

<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                <span aria-hidden="true">&laquo;</span>
                <span class="visually-hidden">Previous</span>
            </a>
        </li>
        <li class="page-item active" aria-current="page">
            <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>
        <li class="page-item">
            <a class="page-link" href="#">...</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">10</a></li>
        <li class="page-item">
            <a class="page-link" href="#">
                <span aria-hidden="true">&raquo;</span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</nav>
        

10. Combining Breadcrumbs and Pagination

A practical example combining both components:

<div class="container mt-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Blog</a></li>
            <li class="breadcrumb-item active">Articles</li>
        </ol>
    </nav>

    <!-- Content here -->
    <h1>Blog Articles</h1>
    <p>List of articles...</p>

    <!-- Pagination -->
    <nav aria-label="Article pagination" class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="#">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="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>
</div>
        

Exercise

Create a blog archive page that includes:

A breadcrumb showing: Home > Blog > 2024 > January
A custom divider for the breadcrumb (>)
A pagination component with 10 pages
Current page should be page 5 (active state)
Include "..." ellipsis between pages 7 and 10
Center-align the pagination
Use icon arrows for previous/next buttons
Add proper ARIA labels for accessibility