Create a breadcrumb and a pagination

Description: Create the breadcrumb Home, Library, Data (current page), and a pagination with 3 pages where page 1 is active.

Hint:

• Use breadcrumb, breadcrumb-item active, pagination, page-item and page-link.

---

Solution

<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>
<nav aria-label="Pages">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">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>

How it works

• The active item of the breadcrumb is not a link and has aria-current="page".
• The Previous item is disabled, because the user is on the first page.

Read Breadcrumb and Pagination.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.