O3 World Component Library

Pagination 

<nav aria-label="pagination">
    <ul class="pagination">
        <li class="pagination__item pagination__item--previous-page">
            <a href="#" class="pagination__link">Previous Page</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>1
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>2
            </a>
        </li>
        <li class="pagination__item pagination__item--is-current">
            <span class="pagination__link" aria-current="page">
              <span class="u-sr-only">page </span>3
            </span>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>4
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>5
            </a>
        </li>
        <li class="pagination__item pagination__item--next-page">
            <a href="#" class="pagination__link">Next Page</a>
        </li>
    </ul>
</nav>
<nav aria-label="pagination">
    <ul class="pagination">
        <li class="pagination__item pagination__item--previous-page">
            <a href="#" class="pagination__link">
            <span class="u-sr-only">Previous Page</span>
            <svg viewbox="0 0 7 13" class="pagination__nav-arrow pagination__nav-arrow--previous" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true">
              <path d="M4.222 6.496L7 9.276v3.72l-6.5-6.5L7 0v3.721" fill-rule="evenodd"></path>
            </svg>
          </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>1
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>2
            </a>
        </li>
        <li class="pagination__item pagination__item--is-current">
            <span class="pagination__link" aria-current="page">
              <span class="u-sr-only">page </span>3
            </span>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>4
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="pagination__link">
              <span class="u-sr-only">page </span>5
            </a>
        </li>
        <li class="pagination__item pagination__item--next-page">
            <a href="#" class="pagination__link">
            <span class="u-sr-only">Next Page</span>
            <svg viewbox="0 0 7 13" class="pagination__nav-arrow pagination__nav-arrow--next" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true">
              <path d="M4.222 6.496L7 9.276v3.72l-6.5-6.5L7 0v3.721" fill-rule="evenodd"></path>
            </svg>
          </a>
        </li>
    </ul>
</nav>
 
{% for nav in navElements %}
  <nav aria-label="pagination">
    <ul class="pagination">
      {% if nav.type == 'text' %}
        <li class="pagination__item pagination__item--previous-page">
          <a href="#" class="pagination__link">Previous Page</a>
        </li>
      {% elseif nav.type == 'arrow' %}
        <li class="pagination__item pagination__item--previous-page">
          <a href="#" class="pagination__link">
            <span class="u-sr-only">Previous Page</span>
            <svg viewbox="0 0 7 13" class="pagination__nav-arrow pagination__nav-arrow--previous" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true">
              <path d="M4.222 6.496L7 9.276v3.72l-6.5-6.5L7 0v3.721" fill-rule="evenodd"></path>
            </svg>
          </a>
        </li>
      {% endif %}
      {% for listItem in nav.listGroup %}
        {% if listItem.defaultPage %}
          <li class="pagination__item pagination__item--is-current">
            <span class="pagination__link" aria-current="page">
              <span class="u-sr-only">page </span>{{ loop.index }}
            </span>
          </li>
        {% else %}
          <li class="pagination__item">
            <a href="{{ listItem.href }}" class="pagination__link">
              <span class="u-sr-only">page </span>{{ loop.index }}
            </a>
          </li>
        {% endif %}
      {% endfor %}
      {% if nav.type == 'text' %}
        <li class="pagination__item pagination__item--next-page">
          <a href="#" class="pagination__link">Next Page</a>
        </li>
      {% elseif nav.type == 'arrow' %}
        <li class="pagination__item pagination__item--next-page">
          <a href="#" class="pagination__link">
            <span class="u-sr-only">Next Page</span>
            <svg viewbox="0 0 7 13" class="pagination__nav-arrow pagination__nav-arrow--next" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true">
              <path d="M4.222 6.496L7 9.276v3.72l-6.5-6.5L7 0v3.721" fill-rule="evenodd"></path>
            </svg>
          </a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endfor %}
 
{
  "navElements": [
    {
      "type": "text",
      "listGroup": [
        {
          "href": "#"
        },
        {
          "href": "#"
        },
        {
          "defaultPage": true
        },
        {
          "href": "#"
        },
        {
          "href": "#"
        }
      ]
    },
    {
      "type": "arrow",
      "listGroup": [
        {
          "href": "#"
        },
        {
          "href": "#"
        },
        {
          "defaultPage": true
        },
        {
          "href": "#"
        },
        {
          "href": "#"
        }
      ]
    }
  ]
}
  • Content: 
    .pagination {
  display: flex;
  justify-content: center;

  &__item {
    margin: 0;
    border: 1px solid color(neutral, light);
    border-right-width: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

    &--is-current {
      background-color: color(neutral, lighter);
    }

    &:last-child {
      border-right-width: 1px;
    }
  }

  &__link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 16px;
    min-width: 40px;
    height: 100%;
    transition: background-color .25s ease-in-out;

    &:hover,
    &:focus  {
      background-color: color(neutral, lighter);
    }
  }

  &__nav-arrow {
    width: 15px;
    height: 15px;
    fill: color(secondary, base);

   &--next {
      transform: rotate(180deg);
    }
  }
}
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: components/pagination/_pagination.scss
  • Size: 803 Bytes

Usage

Pagination controls are used to navigate through paged content using either the Next/Previous Page links or links to specific numbered pages. This is purely a markup example, and the following classes should be incoprorated when integrating this markup with functioning pagination:

  • The pagination__item--previous-page and pagination__item--next-page modifer classes should be used to indicate the previous and next buttons.
  • If the previous and next buttons use SVGs, the SVGs should include the pagination__nav-arrow class, as well as the respective modifier classes, pagination__nav-arrow--previous and pagination__nav-arrow--next.
  • SVG buttons should include u-sr-only text to indicate the function of the button.
  • pagination__item--is-current should be used to used to indicate the current page.

Labelling Expectations

  • Pagination should be contained within a nav element.
  • The outer container should include an aria-label="pagination" to describe the type of navigation.
  • The current page link should include aria-current="page".
  • If a link is disabled it should include aria-disabled="true".

Focus Expectations

  • Pagination items should have visible keyboard focus state

Keyboard Expectations

  • Tab = Move to next focusable element