Skip to content
Better pagination for Jekyll.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Jekyll Pagination

Better pagination for Jekyll

A Jekyll include file of a Mobile-First pagination, configurable with page front-matter.


Pagination elements

Depending on screen size it shows:

  1. Previous page link
  2. First page
  3. 'inivisible' pages indicator
  4. x amount of pages before the current page
  5. The current page
  6. x amount of pages after the current page
  7. 'invisible' pages indicator
  8. Last page
  9. Next page link


Install with bower: bower install


You can configure the output using front-matter on blog index page (for example /blog/index.html). The following options are available:

    root: /blog/
    limit: false
    page_amount: 7
    title_label: Pagination
  • root: The root of your blog.
  • limit: Limit of pagination pages, set to false if you want to use the page_amount setting.
  • page_amount: The amount of pages visible in the pagination. Set to an uneven number for best result.
  • title_label: The title above pagination (only visible for screen readers)

Because the front-matter is applied to the blog index page rather than the _config.yml it is possible to have multiple blogs on your site. You might need an additonal category aware pager plugin to accomplish this.

SCSS variables

  • All variables in the SCSS file are overwriteable.
  • Only set $pages-clearfix to false if you're already using another clearfix @mixin in your prject which this file can access.
  • All the styling variables are only applied when $pages-cosmetics is true (it's true by default)
  • The breakpoint variables are to show or hide pages when the screen is smaller. Use with caution since more pages than wanted may get hidden.

In action

You can’t perform that action at this time.