CSS - Pagination

CSS pagination is a technique of creating page numbers for a website. This help users to easily navigate between large amounts of content. In this chapter, we will learn how to setup and style pagination using CSS.

CSS Pagination Example

Here is a example of pagination styled using CSS.

12345

First PageSecond PageThird PageForth PageFifth Page

Table of Contents

Setup Pagination For a WebsiteSimple Pagination ExampleStyling Pagination Using CSSRounded Pagination ButtonsHoverable Transition EffectBordered PaginationSpace Between LinksPagination SizeCentered PaginationNext and Previous ButtonsBreadcrumb PaginationPagination With List

How to Setup Pagination For a Website?

To set up pagination for a website, you need to break your content into small pages and provide navigation to move between them in every page. Let’s see step by step procedure for setting up pagination.

Setup HTML Structure

First we need to set HTML structure for pagination setup. We can use anchor tags enclosed in div elements for this. Following is code for HTML structure of a pagination setup.

<div class="pagination">

    « <!-- Previous Page -->

    1

    2

    3

    » <!-- Next Page -->

</div>



<div id="page1" class="page active">Page 1 Shows....</div>

<div id="page2" class="page">Page 2 Shows....</div>

Control Visibility With CSS

Initially all the pages should be invisible, expect the first page. For this, we can usedisplayproperty as none for all pages. As class “active” is added to first page, it will be visible initially.

.pagination {

    display: flex;            

    justify-content: center;    

}



.page {

    display: none;         

}



.active {

    display: block;      

}

Pagination Logic With JavaScript

Now, we need to add some JavaScript to handle pagination logic. We can capture click event on pagination links using JavaScriptaddEventListener()method and change visibility of pages based on that.

Simple Pagination Example

The example belows shows simple pagination setup developed using the above steps.

Example

Styling Pagination Using CSS

To style pagination links, we can usepseudo-class:active and :hover.

• Pseudo-class :activeCan be used to highlight current page in pagination links.
• Pseudo-class :hoverCan be used to style mouse hover states of pagination link.

The following example shows how these properties can enhance appearance of pagination links.

Example

Rounded Pagination Buttons

We can create a pagination links with a rounded button by usingborder-radiusCSS property. Let see an example:

Example

Hoverable Transition Effect

We can make pagination link smooth with transition effects when hovering over the each page links usingtransitionproperty. Let see an example:

Example

Bordered Pagination

To add border to pagination links, we can use CSSborderproperty. Here is an example:

Example

Space Between Links

We can use CSSmarginproperty to create a space around each link in the pagination component. Let see an example for this.

Example

Pagination Size

To change the size of pagination links, we can usefont-sizeproperty. Let see an example:

Example

Centered Pagination

We can use thejustify-contentCSS property to center pagination links. Here is an example.

Example

Pagination With Next and Previous Buttons

We can add previous and next buttons across pagination links for quicker navigation. Let see an example for this.

Example

Breadcrumb Pagination

Breadcrumb pagination is a navigation method that shows users the path theyve taken to reach their current page. Let’s see an example to design breadcrumb pagination.

Example

Pagination With List

We can also use unordered list (<ul>) and list items (<li>) for creating the pagination. Let see an example.

Example