<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
                    button button--icon
                " aria-label="Link to previous page">
                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                </svg>

            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 1">
                1
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 2">
                2
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 3">
                3
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 4">
                4
            </a>
        </li>
        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 5, current page">
            5
        </li>

        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page, disabled" disabled tabindex="-1">
                <svg class="icon pager__link-next" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-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
                    {{ navItem.class }}
                "
                aria-label="{{ ariaLabelLeft }}"
                {{#unless arrowLeftActive}}disabled tabindex="-1"{{/unless}}
            >
                {{ render '@icon' navItem.iconPrev }}
            </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
                    {{ navItem.class }}
                "
                aria-label="{{ ariaLabelRight }}"
                {{#unless arrowRightActive}}disabled tabindex="-1"{{/unless}}
            >
                {{ render '@icon' navItem.iconNext }}
            </a>
        </li>
    </ul>
</nav>
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": true,
  "arrowRightActive": false,
  "ariaLabelLeft": "Link to previous page",
  "ariaLabelRight": "Link to next page, disabled",
  "navItem": {
    "class": "button button--icon",
    "iconPrev": {
      "id": "arrow-left",
      "class": "pager__link-prev",
      "hidden": true
    },
    "iconNext": {
      "id": "arrow-right",
      "class": "pager__link-next",
      "hidden": true
    }
  },
  "pages": [
    {
      "pageNo": 1,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 1"
    },
    {
      "pageNo": 2,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 2"
    },
    {
      "pageNo": 3,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 3"
    },
    {
      "pageNo": 4,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 4"
    },
    {
      "pageNo": 5,
      "active": true
    }
  ]
}
  • Content:
    $pager__list-padding                        : 0 $spacer !default;
    $pager__list-margin                         : 0 !default;
    
    $pager__item-margin                         : 0 $spacer !default;
    $pager__item-first-child-margin             : 0 $spacer--semi-medium 0 0 !default;
    $pager__item-last-child-margin              : 0 0 0 $spacer--semi-medium !default;
    $pager__item-after-position--current        : absolute !default;
    $pager__item-after-display--current         : inline !default;
    $pager__item-after-width--current           : 100% !default;
    $pager__item-after-height--current          : 2px !default;
    $pager__item-after-background-color--current: $color-primary !default;
    $pager__item-after-transition--current      : $transition-base !default;
    $pager__item-after-transform-origin--current: left !default;
    $pager__item-size                           : $spacer--extra-large !default;
    $pager__item--current                       : $font-color-base !default;
    $pager__item-text-decoration--current       : none !default;
    $pager__item-font-size                      : $font-size-medium !default;
    
    $pager__link-width                          : 100% !default;
    $pager__link-size                           : $spacer--extra-large !default;
    $pager__link-fill                           : $color-secondary !default;
    $pager__link-fill-disabled                  : $gray !default;
    $pager__link-bg-disabled                    : $white !default;
    $pager__link-focus-fill                     : $color-primary !default;
    $pager__link-color                          : $color-secondary !default;
    $pager__link-text-decoration                : none !default;
    $pager__link-hover-color                    : $color-primary !default;
    $pager__link-hover-fill                     : $color-primary !default;
    
    $pager__icon-size                           : 24px !default;
    
  • URL: /components/raw/pager/_pager-variables.scss
  • Filesystem Path: build/components/Molecules/pager/_pager-variables.scss
  • Size: 1.8 KB
  • Content:
    @import 'pager-variables';
    
    .pager {
        width: 100%;
        text-align: center;
    
        &__list {
            display: flex;
            align-items: center;
            justify-content: center;
            list-style-type: none;
            padding: $pager__list-padding;
            margin: $pager__list-margin;
        }
    
        &__item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-basis: $pager__item-size;
            height: $pager__item-size;
            margin: $pager__item-margin;
            font-size: $pager__item-font-size;
            padding: 0;
    
            &:first-child {
                margin: $pager__item-first-child-margin;
            }
    
            &:last-child {
                margin: $pager__item-last-child-margin;
            }
    
            &--current {
                position: relative;
                color: $pager__item--current;
                text-decoration: $pager__item-text-decoration--current;
    
                &:after {
                    content: '';
                    position: $pager__item-after-position--current;
                    bottom: 0;
                    left: 0;
                    z-index: -1;
                    display: $pager__item-after-display--current;
                    width: $pager__item-after-width--current;
                    height: $pager__item-after-height--current;
                    background-color: $pager__item-after-background-color--current;
                    transition: $pager__item-after-transition--current;
                    transform-origin: $pager__item-after-transform-origin--current;
                }
            }
        }
    
        &__link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: $pager__link-width;
            height: $pager__link-size;
            color: $pager__link-color;
            text-decoration: $pager__link-text-decoration;
    
    
            &[disabled] {
                background-color: $pager__link-bg-disabled;
                pointer-events: none;
                cursor: not-allowed;
    
                .icon {
                    fill: $pager__link-fill-disabled;
                }
            }
    
            &--prev,
            &--next {
                .icon {
                    fill: $pager__link-fill;
                }
            }
        }
    
        &__icon {
            width: $pager__icon-size;
            height: $pager__icon-size;
        }
    }
    
  • URL: /components/raw/pager/_pager.scss
  • Filesystem Path: build/components/Molecules/pager/_pager.scss
  • Size: 2.3 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