Responsive Breadcrumb with Page Number

By Rafi

navigation nav pagination

How do I use This?

Responsive pagination that adds contextual page numbers on the small breakpoint.

HTML

<ul class="pagination text-center" role="navigation" aria-label="Pagination" data-page="6" data-total="16">
  <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
  <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
  <li><a href="#" aria-label="Page 2">2</a></li>
  <li><a href="#" aria-label="Page 3">3</a></li>
  <li><a href="#" aria-label="Page 4">4</a></li>
  <li class="ellipsis" aria-hidden="true"></li>
  <li><a href="#" aria-label="Page 12">12</a></li>
  <li><a href="#" aria-label="Page 13">13</a></li>
  <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
</ul>

$page-number-width: 80px;

@media screen and (max-width: 39.9375em) {
  .pagination:after {
    display: inline-block;
    content: attr(data-page) ' of ' attr(data-total);
    position: relative;
    text-align: center;
    width: $page-number-width;
    right: $page-number-width;
  }

  .pagination-next {
    position: relative;
    left: $page-number-width;
  }
}

@media screen and (max-width: 39.9375em) {
  .pagination:after {
    display: inline-block;
    content: attr(data-page) " of " attr(data-total);
    position: relative;
    text-align: center;
    width: 80px;
    right: 80px;
  }
  .pagination-next {
    position: relative;
    left: 80px;
  }
}

Responsive Breadcrumb with Page Number

By Rafi

Scroll Hiding Nav

Dashboard Nav Card

Animated Dropdown

Responsive Breadcrumb with Page Number

By Rafi

Similar Building Blocks

Scroll Hiding Nav

Dashboard Nav Card

Animated Dropdown