NJ Web Design System (v2.1.0)

Pagination: Default 

<nav aria-label="Pagination" class="usa-pagination ">
    <ul class="usa-pagination__list">

        <li class="usa-pagination__item usa-pagination__arrow">
            <a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">

                <svg class="usa-icon" aria-hidden="true" role="img">
                    <use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
                </svg>

                <span class="usa-pagination__link-text">
                    Previous
                </span>

            </a>
        </li>

        <li class="usa-pagination__item usa-pagination__page-no">
            <a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 1">
                1
            </a>
        </li>

        <li class="usa-pagination__item usa-pagination__overflow" role="presentation">
            <span>
                …
            </span>
        </li>

        <li class="usa-pagination__item usa-pagination__page-no">
            <a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 9">
                9
            </a>
        </li>

        <li class="usa-pagination__item usa-pagination__page-no">
            <a href="javascript:void(0);" class="usa-pagination__button usa-current" aria-label="Page 10" aria-current="page">
                10
            </a>
        </li>

        <li class="usa-pagination__item usa-pagination__page-no">
            <a href="javascript:void(0);" class="usa-pagination__button " aria-label="Page 11">
                11
            </a>
        </li>

        <li class="usa-pagination__item usa-pagination__overflow" role="presentation">
            <span>
                …
            </span>
        </li>

        <li class="usa-pagination__item usa-pagination__page-no">
            <a href="javascript:void(0);" class="usa-pagination__button " aria-label="Last page, page 24">
                24
            </a>
        </li>

        <li class="usa-pagination__item usa-pagination__arrow">
            <a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">

                <span class="usa-pagination__link-text">
                    Next
                </span>

                <svg class="usa-icon" aria-hidden="true" role="img">
                    <use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
                </svg>

            </a>
        </li>

    </ul>
</nav>

No notes defined.

{% from "pagination/_pagination-button.njk" import paginationButton %}
{% from "pagination/_pagination-arrow.njk" import paginationArrow %}

{# TODO - Create macro #}
{% set sprite_path = uswds.path + "/img/sprite.svg" %}

{% set overflow %}
  <li class="usa-pagination__item usa-pagination__overflow" role="presentation">
    <span>
      …
    </span>
  </li>
{% endset %}

<nav aria-label="{{ aria_label }}" class="usa-pagination {{ modifier }}">
  <ul class="usa-pagination__list">
    {% block pagination_content %}
      {# Previous page #}
      {# Don't show `Previous` button if on first page #}
      {% if pagination.current > 1 %}
        {{ paginationArrow('previous', pagination) }}
      {% endif %}

      {% if not pagination.unbounded %}
        {% include "pagination/_pagination-numbers--default.njk" %}
      {% else %}
        {% include "pagination/_pagination-numbers--unbounded.njk" %}
      {% endif %}

      {# Next page #}
      {# Don't show `next` button if on last page #}
      {% if pagination.current != pagination.items %}
        {{ paginationArrow('next', pagination) }}
      {% endif %}
    {% endblock %}
  </ul>
</nav>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
lang: en
placeholder_link: javascript:void(0);
modifier: ''
aria_label: Pagination
pagination:
  page_label: Page
  unbounded: false
  items: 24
  current: 10
  previous:
    label: Previous
  next:
    label: Next
  last_item:
    label: Last page,