Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creating an accessible pagination with Liquid
{%- paginate blog.articles by 5 -%}
{%- for article in blog.articles -%}
<!-- show blog article details here -->
{%- endfor -%}
{%- if paginate.pages > 1 -%}
<nav role="navigation">
<ol class="pagination">
{%- if paginate.previous-%}
<li>
<a href="{{ paginate.previous.url }}">
<span aria-hidden="true">&laquo;</span>
Previous <span class="visuallyhidden">page</span>
</a>
</li>
{%- else -%}
<li class="disabled">
<span aria-hidden="true">&laquo;</span>
Previous <span class="visuallyhidden">page</span>
</li>
{%- endif -%}
{%- for part in paginate.parts -%}
{%- if part.is_link -%}
<li>
<a href="{{ part.url }}">
<span class="visuallyhidden">page</span> {{ part.title }}
</a>
</li>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<li class="active" aria-current="page">
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- else -%}
<li>
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- if paginate.next -%}
<li>
<a href="{{ paginate.next.url }}">
Next <span class="visuallyhidden">page</span>
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{%- else -%}
<li class="disabled">
Next <span class="visuallyhidden">page</span>
<span aria-hidden="true">&raquo;</span>
</li>
{%- endif -%}
</ol>
</nav>
{%- endif -%}
{%- endpaginate -%}
<style>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.pagination li {
display: inline;
margin: 0 5px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.