<!-- Default -->
<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, disabled" type="button" disabled tabindex="-1">
<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 1, current page">
1
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 2">
2
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 3">
3
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 4">
4
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 5">
5
</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>
<!-- Both Arrows -->
<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">
<a href="#" class="pager__link link--invert" aria-label="Link to page 1">
1
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 2">
2
</a>
</li>
<li class="pager__item pager__item--current" aria-current="page" aria-label="Page 3, current page">
3
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 4">
4
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 5">
5
</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>
<!-- Arrow Left -->
<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">
<a href="#" class="pager__link link--invert" aria-label="Link to page 1">
1
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 2">
2
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 3">
3
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" 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" aria-label="Link to next page, disabled" type="button" disabled tabindex="-1">
<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>
<!-- More Sites -->
<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>
<!-- Arrow Right -->
<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 13, current page">
13
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 14">
14
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 15">
15
</a>
</li>
<li class="pager__item">
<a href="#" class="pager__link link--invert" aria-label="Link to page 16">
16
</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 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>
/* Default */
{
"attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
"arrowLeftActive": false,
"arrowRightActive": true,
"ariaLabelLeft": "Link to previous page, disabled",
"ariaLabelRight": "Link to next page",
"labelLeft": "Terug",
"labelRight": "Volgende",
"pages": [
{
"pageNo": "1",
"active": true
},
{
"pageNo": 2,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 2"
},
{
"pageNo": 3,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 3"
},
{
"pageNo": 4,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 4"
},
{
"pageNo": 5,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 5"
}
]
}
/* Both Arrows */
{
"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": 1,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 1"
},
{
"pageNo": 2,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 2"
},
{
"pageNo": 3,
"active": true,
"ariaLabel": "Link to page 3"
},
{
"pageNo": 4,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 4"
},
{
"pageNo": 5,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 5"
}
]
}
/* Arrow Left */
{
"attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
"arrowLeftActive": true,
"arrowRightActive": false,
"ariaLabelLeft": "Link to previous page",
"ariaLabelRight": "Link to next page, disabled",
"labelLeft": "Terug",
"labelRight": "Volgende",
"pages": [
{
"pageNo": 1,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 1"
},
{
"pageNo": 2,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 2"
},
{
"pageNo": 3,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 3"
},
{
"pageNo": 4,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 4"
},
{
"pageNo": 5,
"active": true
}
]
}
/* More Sites */
{
"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"
}
]
}
/* Arrow Right */
{
"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": 13,
"active": true
},
{
"pageNo": 14,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 14"
},
{
"pageNo": 15,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 15"
},
{
"pageNo": 16,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 16"
},
{
"pageNo": 17,
"active": false,
"class": "link--invert",
"ariaLabel": "Link to page 17"
}
]
}
$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;
}
}
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