Eleventy - Pagination - Navigation

   
   
 11ty  bulma  
 ssg  
Article Series

This article series contain few sections.

Eleventy Basic

General Design

Custom Pages

Widget Component

Pagination Component

Page Content

Related Article Series

Conclusion

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Add Navigation to pagination, combined with simple numbering.

Source Code

This article use tutor-07 theme. We will create it step by step.

1: Prepare

We are still using pagination number, but this time with navigation.

Preview: General

This is what we want to achieve in this tutorial.

11ty Pagination: Number Pagination with Navigation

Layout: Nunjucks Blog

In blog.njk, you can use:

  • pagination/02-number-nav-01 partial, or

  • pagination/02-number-nav-02 partial

  • pagination/02-number-nav-03 partial

2: Navigation: Outside List Style

Consider give it a complete navigation:

  • prev, next, and

  • first, last

Layout: Nunjucks Blog

  {% include "pagination/02-number-nav-01.njk" %}

Bulma Pagination

We can utilize example from Bulma official documentation. Which has a very nice looks.

{% set totalPages = pagination.links.length %}
{% set current    = pagination.pageNumber + 1 %}

{% if totalPages > 1 %}
<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">

    <!-- First Page. -->
    {% if current  > 1 %}
      <a class="pagination-previous hoverable"
         href="{{ pagination.firstPageLink }}"
         rel="first">First</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>First</a>
    {% endif %}

    <!-- Previous Page. -->
    {% if pagination.previousPageLink %}
      <a class="pagination-previous hoverable"
         href="{{ pagination.previousPageLink }}" 
         rel="prev">Previous</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>Previous</a>
    {% endif %}
    
    <!-- Next Page. -->
    {% if pagination.nextPageLink %}
      <a class="pagination-next hoverable"
         href="{{ pagination.nextPageLink }}"
         rel="next">Next</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>Next</a>
    {% endif %}

    <!-- Last Page. -->
    {% if current  != totalPages %}
      <a class="pagination-next hoverable"
         href="{{ pagination.lastPageLink }}"
         rel="last">Last</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    {% endif %}

    <ul class="pagination-list">
    <!-- Page numbers. -->
    {% for cursor, link in pagination.links | hashIt %}
      <li>
      {% if cursor != current  %}
        <a class="pagination-link hoverable"
           href="{{ link }}"
           aria-label="Goto page {{ cursor }}">
          {{ cursor }}
        </a>
       {% else %}
       <a class="pagination-link is-current {{ color }}" 
           aria-label="Page {{ cursor }}">
          {{ cursor }}
        </a>
 
      {% endif %}
      </li>
    {% endfor %}
    </ul>

</nav>
{% endif %}

Browser: Pagination Preview

Which shown nice pagination.

11ty Pagination: Outside List Style

3: Navigation: Inline List Style

Alternatively you can wrap all the navigation, inside ul li tags.

Layout: Nunjucks Blog

  {% include "pagination/02-number-nav-02.njk" %}

Bulma Pagination

Consider give it a complete navigation:

  • prev, next, and

  • first, last

But this time, put the navigation inside the <li>...</li>.

{% set totalPages = pagination.links.length %}
{% set current    = pagination.pageNumber + 1 %}

{% if totalPages > 1 %}
<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">

    <ul class="pagination-list">

      <!-- First Page. -->
      <li>
      {% if current > 1 %}
        <a class="pagination-previous hoverable"
           href="{{ pagination.firstPageLink }}"
           rel="first">
          &laquo;&laquo;&nbsp;</a>
      {% else %}
        <a class="pagination-previous"
           title="This is the first page"
           disabled>
          &laquo;&laquo;&nbsp;</a>
      {% endif %}
      </li>

      <!-- Previous Page. -->
      <li>
      {% if pagination.previousPageLink %}
        <a class="pagination-previous hoverable"
           href="{{ pagination.previousPageLink }}"
           rel="prev">
          &laquo;&nbsp;</a>
      {% else %}
        <a class="pagination-previous"
           title="This is the first page"
           disabled>
          &laquo;&nbsp;</a>
      {% endif %}
      </li>

    <!-- Page numbers. -->
    {% for cursor, link in pagination.links | hashIt %}
      <li>
      {% if cursor != current  %}
        <a class="pagination-link hoverable"
           href="{{ link }}"
           aria-label="Goto page {{ cursor }}">
          {{ cursor }}
        </a>
       {% else %}
       <a class="pagination-link is-current {{ color }}" 
           aria-label="Page {{ cursor }}">
          {{ cursor }}
        </a>
 
      {% endif %}
      </li>
    {% endfor %}

      <!-- Next Page. -->
      <li>
      {% if pagination.nextPageLink %}
        <a class="pagination-next hoverable"
           href="{{ pagination.nextPageLink }}"
           rel="next">
          &nbsp;&raquo;</a>
      {% else %}
        <a class="pagination-next"
           title="This is the last page"
           disabled>
          &nbsp;&raquo;</a>
      {% endif %}
      </li>

      <!-- Last Page. -->
      <li>
      {% if current != totalPages %}
        <a class="pagination-next hoverable"
           href="{{ pagination.lastPageLink }}"
           rel="last">
          &nbsp;&raquo;&raquo;</a>
      {% else %}
        <a class="pagination-next"
           title="This is the last page"
           disabled>
          &nbsp;&raquo;&raquo;</a>
      {% endif %}
      </li>

    </ul>

</nav>
{% endif %}

We simply use these &raquo; and &laquo; for navigation icon.

Browser: Pagination Preview

Which shown, another kind of pagination.

11ty Pagination: Inline List Style

Bulma capable to show both, without any custom stylesheet.

Responsive Stylesheet: Bulma Mixins

By the help of mixins/breakpoints, we can write it in bulma style.

+tablet
  li.icon-previous a:after
    content: " Previous"
  li.icon-next a:before
    content: "Next "
  li.icon-first a:after
    content: " First"
  li.icon-last a:before
    content: "Last "

SASS: Bulma Breakpoint Variables.

Bulma 0.7, or Bulma 0.8 breakpoints are defined as below.

// The container horizontal gap,
// which acts as the offset for breakpoints

$gap        : 64px !default
$tablet     : 769px !default
$desktop    : 960px + (2 * $gap) !default
$widescreen : 1152px + (2 * $gap) !default
$fullhd     : 1344px + (2 * $gap) !default

Responsive Class

Now we can add class in each respective element.

{% set totalPages = pagination.links.length %}
{% set current    = pagination.pageNumber + 1 %}

{% if totalPages > 1 %}
<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">

    <ul class="pagination-list">

      <!-- First Page. -->
      <li class="icon-first">
      ...
      </li>

      <!-- Previous Page. -->
      <li class="icon-previous">
      ...
      </li>

      <!-- Page numbers. -->
      {% for cursor, link in pagination.links | hashIt %}
        ..
      {% endfor %}

      <!-- Next Page. -->
      <li class="icon-next">
      ...
      </li>

      <!-- Last Page. -->
      <li class="icon-last">
      ...
      </li>

    </ul>

</nav>
{% endif %}

Browser: Responsive Pagination Preview

In tablet screen, this will show different looks

11ty Pagination: Responsive Inline List Style

4: Navigation: Font Awesome

We can improve the looks of inline list style above.

Layout: Nunjucks Blog

  {% include "pagination/02-number-nav-03.njk" %}

Bulma Pagination

{% set totalPages = pagination.links.length %}
{% set current    = pagination.pageNumber + 1 %}

{% if totalPages > 1 %}
<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">

    <ul class="pagination-list">

      <!-- First Page. -->
      <li>
      {% if current > 1 %}
        <a class="pagination-previous hoverable"
           href="{{ pagination.firstPageLink }}"
           rel="first">
          <span class="fas fa-step-backward"></span>&nbsp;</a>
      {% else %}
        <a class="pagination-previous"
           title="This is the first page"
           disabled>
          <span class="fas fa-step-backward"></span>&nbsp;</a>
      {% endif %}
      </li>

      <!-- Previous Page. -->
      <li>
      {% if pagination.previousPageLink %}
        <a class="pagination-previous hoverable"
           href="{{ pagination.previousPageLink }}"
           rel="prev">
          <span class="fas fa-backward"></span>&nbsp;</a>
      {% else %}
        <a class="pagination-previous"
           title="This is the first page"
           disabled>
          <span class="fas fa-backward"></span>&nbsp;</a>
      {% endif %}
      </li>

    <!-- Page numbers. -->
    {% for cursor, link in pagination.links | hashIt %}
      <li>
      {% if cursor != current  %}
        <a class="pagination-link hoverable"
           href="{{ link }}"
           aria-label="Goto page {{ cursor }}">
          {{ cursor }}
        </a>
       {% else %}
       <a class="pagination-link is-current {{ color }}" 
           aria-label="Page {{ cursor }}">
          {{ cursor }}
        </a>
 
      {% endif %}
      </li>
    {% endfor %}

      <!-- Next Page. -->
      <li>
      {% if pagination.nextPageLink %}
        <a class="pagination-next hoverable"
           href="{{ pagination.nextPageLink }}"
           rel="next">&nbsp;
          <span class="fas fa-forward"></span></a>
      {% else %}
        <a class="pagination-next"
           title="This is the last page"
           disabled>&nbsp;
          <span class="fas fa-forward"></span></a>
      {% endif %}
      </li>

      <!-- Last Page. -->
      <li>
      {% if current != totalPages %}
        <a class="pagination-next hoverable"
           href="{{ pagination.lastPageLink }}"
           rel="last">&nbsp;
          <span class="fas fa-step-forward"></span></a>
      {% else %}
        <a class="pagination-next"
           title="This is the last page"
           disabled>&nbsp;
          <span class="fas fa-step-forward"></span></a>
      {% endif %}
      </li>

    </ul>

</nav>
{% endif %}

Browser: Pagination Preview

Which shown, another kind of pagination.

11ty Pagination: Inline List Style with Awesome Font

Responsive Stylesheet: Bulma Mixins

By the help of Bulma’s mixins/breakpoints, we can put additional rules in pagination stylesheet.

+tablet
  li.icon-previous a:after
    content: " Previous"
  li.icon-next a:before
    content: "Next "
  li.icon-first a:after
    content: " First"
  li.icon-last a:before
    content: "Last "
  li.icon-previous a span.fas,
  li.icon-next a span.fas,
  li.icon-first a span.fas,
  li.icon-last a span.fas
    display: none

Responsive Class

Now we can add class in each respective element.

  • icon-first

  • icon-previous

  • icon-next

  • icon-last

Browser: Responsive Pagination Preview

In tablet screen, this will show different looks

11ty Pagination: Responsive Inline List Style

What is Next ?

Do not get confused yet. Keep calm, just like this cute kitten. Our pagination tutorial still have some materials to go.

adorable kitten

Consider continue reading [ Eleventy - Pagination - Adjacent ]. We are going to explore an advance topic, the adjacent pagination.

Thank you for reading.