<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 pager__item--current" aria-current="page" aria-label="Page 6, current page">
6
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 7">
7
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="">
...
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 17">
17
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link" aria-label="Link to page 18">
18
</a>
</li>
<li class="pager__item">
<a href="#" class="
pager__link
pager__link--next
button button--icon
" aria-label="Link to next page">
<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": true,
"ariaLabelLeft": "Link to previous page",
"ariaLabelRight": "Link to next page",
"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": 6,
"active": true
},
{
"pageNo": 7,
"active": false,
"class": "link",
"ariaLabel": "Link to page 7"
},
{
"pageNo": "...",
"class": "link",
"active": false
},
{
"pageNo": 17,
"active": false,
"class": "link",
"ariaLabel": "Link to page 17"
},
{
"pageNo": 18,
"active": false,
"class": "link",
"ariaLabel": "Link to page 18"
}
]
}
$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;
@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;
}
}
aria-labels form page itemsnav elementaria-current="page" to mark active/current page in pagerdisable on buttons like previous or next which are not lead anywhere