Responsive Breadcrumb with Page Number

By Rafi

F6
#
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;
  }
}
JS

Similar Building Blocks

navigation

Scroll Hiding Nav

F6
by Rafi
navigation

Dashboard Nav Card

F6
by Tim Hartwick
navigation

Animated Dropdown

F6
by Rafi