A pagination element.
<nav role="navigation" class="azalea-container bg-white border-t border-tertiary-200" aria-label="Pagination">
<div class="flex items-center justify-center px-4 py-3 sm:px-6 mb-2 border-b border-tertiary-200">
<a href="#" class="flex text-tertiary-600 hover:no-underline" title="Go to up to parent page">
<span class="mr-1 -rotate-45">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="18" y1="11" x2="12" y2="5"></line>
<line x1="6" y1="11" x2="12" y2="5"></line>
</svg>
</div>
</span>
<span>The parent article</span>
</a>
</div>
<div class="flex py-3 justify-between">
<a class="azalea-push-button azalea-touch-action inline-flex grow-0 items-center py-2 px-4 border border-transparent rounded-sm no-underline hover:no-underline font-body font-normal text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 whitespace-nowrap bg-primary-800 hover:bg-primary-600 text-white text-sm" href="#" title="Go to previous page" rel="prev"><span class="mr-1">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="5" y1="12" x2="11" y2="18"></line>
<line x1="5" y1="12" x2="11" y2="6"></line>
</svg></div>
</span><span class="not-sr-only md:sr-only">Previous</span><span class="sr-only md:not-sr-only">Previous</span></a> <a class="azalea-push-button azalea-touch-action inline-flex grow-0 items-center py-2 px-4 border border-transparent rounded-sm no-underline hover:no-underline font-body font-normal text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 whitespace-nowrap bg-primary-800 hover:bg-primary-600 text-white text-sm" href="#" title="Go to next page" rel="next"><span class="not-sr-only md:sr-only">Next</span><span class="sr-only md:not-sr-only">Next</span><span class="mr-1">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="13" y1="18" x2="19" y2="12" />
<line x1="13" y1="6" x2="19" y2="12" />
</svg></div>
</span></a>
</div>
</nav>
{# Prop: nav
Example:
nav: {
includeParent: true,
position: 3,
count: 4,
parent: {
id: 1,
title: 'this is the parent node title',
path: '/path/to/parent/node'
}
next: {
id: 2,
title: 'this is a next node title',
path: '/path/to/next/node'
}
previous: {
id: 3,
title: 'this is a previous node title',
path: '/path/to/previous/node'
}
}
#}
<nav role="navigation" class="azalea-container bg-white border-t border-tertiary-200" aria-label="Pagination">
{% if nav.parent and nav.includeParent %}
<div class="flex items-center justify-center px-4 py-3 sm:px-6 mb-2 border-b border-tertiary-200">
<a href="{{ nav.parent.path }}" class="flex text-tertiary-600 hover:no-underline" title="Go to up to parent page">
<span class="mr-1 -rotate-45">
{% include "@components/icon/icon.twig" with { icon: 'arrow-up', size: 'small' } only %}
</span>
<span>{{ nav.parent.title }}</span>
</a>
</div>
{% endif %}
{% set class = 'justify-between' %}
{% if nav.previous and not nav.next %}
{% set class = 'justify-start' %}
{% elseif not nav.previous and nav.next %}
{% set class = 'justify-end' %}
{% endif %}
<div class="flex py-3 {{ class }}">
{% if nav.previous %}
{% embed "@components/push-button/push-button.twig" with { color: 'primary', size: 'small', as: 'a', href: nav.previous.path, title: 'Go to previous page', rel: 'prev' } %}
{% block content %}
<span class="mr-1">
{% include "@components/icon/icon.twig" with { icon: 'arrow-left', size: 'small' } only %}
</span>
<span class="not-sr-only md:sr-only">Previous</span>
<span class="sr-only md:not-sr-only">{{ nav.previous.title }}</span>
{% endblock %}
{% endembed %}
{% endif %}
{% if nav.next %}
{% embed "@components/push-button/push-button.twig" with { color: 'primary', size: 'small', as: 'a', href: nav.next.path, title: 'Go to next page', rel: 'next' } %}
{% block content %}
<span class="not-sr-only md:sr-only">Next</span>
<span class="sr-only md:not-sr-only">{{ nav.next.title }}</span>
<span class="mr-1">
{% include "@components/icon/icon.twig" with { icon: 'arrow-right', size: 'small' } only %}
</span>
{% endblock %}
{% endembed %}
{% endif %}
</div>
</nav>