<nav class="pager " role="navigation" aria-label="Pagination navigation">
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#" class="pager__link pager__link--prev" aria-label="Link to previous page" type="button">
                <svg class="pager__icon" aria-hidden="true">
                    <use xlink:href="/images/icons-sprite.svg#angle-left"></use>
                </svg>
                <span class="pager__label">
                    Terug
                </span>
            </a>
        </li>

        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 6, current page">
            6
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link--invert" aria-label="Link to page 7">
                7
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link--invert" aria-label="">
                ...
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link--invert" aria-label="Link to page 17">
                17
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link--invert" aria-label="Link to page 18">
                18
            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="pager__link pager__link--next" aria-label="Link to next page" type="button">
                <span class="pager__label">
                    Volgende
                </span>
                <svg class="pager__icon" aria-hidden="true">
                    <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
<nav class="pager {{ class }}" {{{attributes}}}>
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#"
                class="pager__link pager__link--prev"
                aria-label="{{ ariaLabelLeft }}"
                type="button"
                {{#unless arrowLeftActive}}disabled tabindex="-1"{{/unless}}
            >
                <svg class="pager__icon" aria-hidden="true">
                    <use xlink:href="{{ svg 'angle-left' }}"></use>
                </svg>
                <span class="pager__label">
                    {{labelLeft}}
                </span>
            </a>
        </li>

        {{#each pages as |page|}}
            {{#if this.active}}
                <li
                    class="pager__item pager__item--current"
                    aria-current="page"
                    aria-label="Page {{ pageNo }}, current page"
                >
                    {{ pageNo }}
                </li>
            {{else}}
                <li class="pager__item">
                    <a href="#"
                       class="pager__link {{ class }}"
                       aria-label="{{ ariaLabel }}"
                    >
                        {{ pageNo }}
                    </a>
                </li>
            {{/if}}
        {{/each}}

        <li class="pager__item">
            <a href="#"
                class="pager__link pager__link--next"
                aria-label="{{ ariaLabelRight }}"
                type="button"
                {{#unless arrowRightActive}}disabled tabindex="-1"{{/unless}}
            >
                <span class="pager__label">
                    {{labelRight}}
                </span>
                <svg class="pager__icon" aria-hidden="true">
                    <use xlink:href="{{ svg 'angle-right' }}"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": true,
  "arrowRightActive": true,
  "ariaLabelLeft": "Link to previous page",
  "ariaLabelRight": "Link to next page",
  "labelLeft": "Terug",
  "labelRight": "Volgende",
  "pages": [
    {
      "pageNo": 6,
      "active": true
    },
    {
      "pageNo": 7,
      "active": false,
      "class": "link--invert",
      "ariaLabel": "Link to page 7"
    },
    {
      "pageNo": "...",
      "class": "link--invert",
      "active": false
    },
    {
      "pageNo": 17,
      "active": false,
      "class": "link--invert",
      "ariaLabel": "Link to page 17"
    },
    {
      "pageNo": 18,
      "active": false,
      "class": "link--invert",
      "ariaLabel": "Link to page 18"
    }
  ]
}
  • Content:
    $pager__list-padding                        : 0 !default;
    $pager__item-margin                         : 0 !default;
    $pager__item-padding                        : 0 12px !default;
    $pager__item-after-height--current          : $spacer !default;
    $pager__item-after-background-color--current: $color-primary !default;
    $pager__item-after-transition--current      : $transition-base  !default;
    $pager__item-size                           : $spacer--large !default;
    $pager__item-color                          : $black !default;
    $pager__item-color--current                 : $black !default;
    $pager__item-text-decoration--current       : none !default;
    $pager__icon-width                          : 14px !default;
    $pager__icon-height                         : 14px !default;
    $pager__link-fill                           : $white !default;
    
    .pager {
        width: 100%;
        text-align: center;
    
        &__list {
            display: flex;
            align-items: center;
            justify-content: center;
            list-style-type: none;
            padding: $pager__list-padding;
            margin: 0;
        }
    
        &__item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-basis: $pager__item-size;
            height: $pager__item-size;
            margin: $pager__item-margin;
            padding: $pager__item-padding;
    
            color: $pager__item-color;
            background: transparent;
            border-radius: 5px;
    
            &--current {
                color: $pager__item-color--current;
                background: #ecf5f4;
                position: relative;
                text-decoration: $pager__item-text-decoration--current;
            }
        }
    
        &__link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: $pager__item-size;
            text-decoration: none;
            font-family: $font-family-saira;
    
            &[disabled] {
                display: none;
            }
    
            &--prev,
            &--next {
                fill: $pager__link-fill;
                background-color: $red;
                border-radius: $border-radius;
                padding: 12px;
            }
    
            &--prev {
                & .pager__icon {
                    margin-right: 12px;
                }
            }
    
            &--next {
                & .pager__icon {
                    margin-left: 12px;
                }
            }
    
        }
    
        &__label {
            color: $white;
            font-size: $font-size-base;
            font-style: italic;
            font-family: $font-family-evogria;
            font-weight: normal;
            text-transform: capitalize;
        }
    
        &__icon {
            width: $pager__icon-width;
            height: $pager__icon-height;
        }
    }
    
  • URL: /components/raw/pager/_pager.scss
  • Filesystem Path: build/components/02-elements/pager/_pager.scss
  • Size: 2.7 KB

Pager

Accessibility

  • Add apropriate labels and aria-labels form page items
  • Structure pagination as a navigation and use a nav element
  • Use aria-current="page" to mark active/current page in pager
  • Use disable on buttons like previous or next which are not lead anywhere