Pagination: Large 3

Pagination

When to use this component

Use pagination to divide the content on overview pages with a big amount of content into multiple pages.

When using pagination, the pagination component shows the number of pages, the current page and links to all other pages, in particular the first page, the last page, the previous page and the next page. The pagination component is used on overview pages and on filter pages.

When not to use this component

Do not use the pagination component (or hide it) when the content on a overview pages is not divided or does not need to be divided into multiple pages.

Do not use the pagination component on detail pages.

In general, do not use the pagination component for other uses than pagination.

How it works

The pagination component consists of the following required elements:

  • Indication of the current page.
  • Link to the first page.
  • Link to the previous page.
  • Link to the next page.
  • Link to the last page.
  • An ellipsis between the link to the previouw page and the link to the the first available next page number.
  • An ellipsis between the link to the next page and the link to the first available previous page number.

Depending on the available width, the number of pages and what the current page is at a certain point, the elements are shown or hidden in a certain way. See the examples for more context.

<nav class="pager" aria-labelledby="pagination_1-{{ total ~ active }}">
  <h2 id="pagination_1-{{ total ~ active }}" class="visually-hidden">Pagination</h2>
  {% spaceless %}
    <ul class="pager__items">

      {% if 1 != active %}
        <li class="previous">
          <a href="#" class="previous">
            Previous
            <span class="visually-hidden">page</span>
          </a>
        </li>
      {% endif %}

      {% if 1 == active %}
        <li class="active">
          <span class="visually-hidden">Page</span>
          {{ 1 }}
        </li>
      {% else %}
        <li>
          <a href="#" title="Go to page {{ 1 }}">
            <span class="visually-hidden">Page</span>
            {{ 1 }}
          </a>
        </li>
      {% endif %}

      {% if active > 3 %}
        <li class="spacing">...</li>
      {% endif %}

      {% if active-1 > 1 and active-1 != total %}
        <li class="prev--number">
          <a href="#" title="Go to page {{ active-1 }}">
            <span class="visually-hidden">Page</span>
            {{ active-1 }}
          </a>
        </li>
      {% endif %}

      {% if active != 1 and active != total %}
        <li class="active">
          <span class="visually-hidden">Page</span>
          {{ active }}
        </li>
      {% endif %}

      {% if active+1 < total %}
        <li class="next--number">
          <a href="#" title="Go to page {{ active+1 }}">
            <span class="visually-hidden">Page</span>
            {{ active+1 }}
          </a>
        </li>
      {% endif %}

      {% if total - active > 2 %}
        <li class="spacing">...</li>
      {% endif %}

      {% if total == active %}
        <li class="active">
          <span class="visually-hidden">Page</span>
          {{ total }}
        </li>
      {% else %}
        <li>
          <a href="#" title="Go to page {{ total }}">
            <span class="visually-hidden">Page</span>
            {{ total }}
          </a>
        </li>
      {% endif %}

      {% if total != active %}
        <li class="next">
          <a href="#">
            Next
            <span class="visually-hidden">page</span>
          </a>
        </li>
      {% endif %}
    </ul>
  {% endspaceless %}
</nav>
<nav class="pager" aria-labelledby="pagination_1-55552555">
    <h2 id="pagination_1-55552555" class="visually-hidden">Pagination</h2>
    <ul class="pager__items">
        <li class="previous"><a href="#" class="previous">
                Previous
                <span class="visually-hidden">page</span></a></li>
        <li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
                1
            </a></li>
        <li class="spacing">...</li>
        <li class="prev--number"><a href="#" title="Go to page 2554"><span class="visually-hidden">Page</span>
                2554
            </a></li>
        <li class="active"><span class="visually-hidden">Page</span>
            2555
        </li>
        <li class="next--number"><a href="#" title="Go to page 2556"><span class="visually-hidden">Page</span>
                2556
            </a></li>
        <li class="spacing">...</li>
        <li><a href="#" title="Go to page 5555"><span class="visually-hidden">Page</span>
                5555
            </a></li>
        <li class="next"><a href="#">
                Next
                <span class="visually-hidden">page</span></a></li>
    </ul>
</nav>
{
  "total": 5555,
  "active": 2555
}
  • Content:
    .pager {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    
      @include tablet {
        justify-content: flex-end;
      }
    
      ul {
        display: flex;
        flex: 1;
        flex-basis: 100%;
        align-items: center;
        justify-content: center;
        margin: 0;
        list-style: none;
    
        @include tablet {
          flex-basis: auto;
          justify-content: flex-start;
        }
    
        li {
          @include theme('color', 'color-primary', 'link-color');
    
          display: flex;
          flex: 0 0 auto;
          justify-content: center;
          min-width: 1.6rem;
          text-align: center;
        }
    
        a,
        li.active {
          @include reset-link-background;
          @include bold-text;
    
          padding-right: .4rem;
          padding-left: .4rem;
          font-size: .8rem;
          line-height: 1.2;
    
          @include phablet {
            padding-right: 1rem;
            padding-left: 1rem;
            font-size: 1rem;
          }
        }
    
        li.spacing {
          min-width: 1rem;
          padding: .3rem;
        }
    
        .active {
          @include theme('color', 'color-tertiary', 'pagination-active-color');
    
          position: relative;
          padding-top: .3rem;
          padding-bottom: .3rem;
    
          &::after {
            @include theme('background-color', 'color-primary', 'link-color');
    
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            width: 1.2rem;
            height: 2px;
            margin: auto;
            content: '';
          }
        }
    
        .previous,
        .next {
          display: none;
    
          @include tablet {
            display: flex;
          }
    
          a {
            display: inline-flex;
            align-items: center;
            margin-left: 0;
            padding: 0 1rem;
            font-size: .9rem;
            text-decoration: none;
    
            &:hover,
            &:focus {
              background: transparent;
            }
          }
        }
    
        .next {
          a {
            @extend %a-arrow-animation;
            @include icon(arrow-right, after);
    
            padding-right: 0;
    
            &::after {
              margin-right: -.2rem;
              padding-right: .2rem;
            }
          }
        }
    
        .previous {
          a {
            @extend %a-arrow-animation--left;
            @include icon(arrow-left, after);
    
            flex-direction: row-reverse;
            padding-left: 0;
    
            &::after {
              margin-left: -.2rem;
              padding-right: .2rem;
              padding-left: .4rem;
            }
          }
        }
      }
    
      .button {
        margin: 1rem 0;
      }
    }
    
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: components/31-molecules/pagination/_pagination.scss
  • Size: 2.4 KB