Spectre Pagination

Last Updated : 30 Jan, 2022

Spectre Pagination is used to create a pagination, it’s basically is used to enable navigation between pages in a website. The pagination used in spectre has a large block of connected links that are hard to miss and are easily scalable.

To create a pagination you need to add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled class to the page-item to have unclickable page links.

Spectre Pagination Class:

pagination: This class is used to create pagination.
page-item: This class is used to set the numbers or page item of pagination.

Note: The active and disabled class can be used to make the page-item active and disabled.

Syntax:

<ul class="pagination">
  <li class="page-item disabled">
    <a href="#">...</a>
  </li>
  <li class="page-item active">
    <a href="#">...</a>
  </li>
</ul>

Below examples illustrate Spectre Pagination:

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Nav Class</title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Pagination Class</strong> 
          
    </center> 
    <strong>Numeric Pagination:</strong> 
    <ul class="pagination"> 
      <li class="page-item disabled"> 
        <a href="#" tabindex="-1">Previous</a> 
      </li> 
      <li class="page-item "> 
        <a href="#">1</a> 
      </li> 
      <li class="page-item"> 
        <a href="#">2</a> 
      </li> 
      <li class="page-item"> 
        <a href="#">3</a> 
      </li> 
      <li class="page-item"> 
        <span>...</span> 
      </li> 
      <li class="page-item active"> 
        <a href="#">12</a> 
      </li> 
      <li class="page-item"> 
        <a href="#">Next</a> 
      </li> 
    </ul> 
    <br><br> 
    <strong>Alphabetic Pagination:</strong> 
    <ul class="pagination"> 
      <li class="page-item disabled"> 
        <a href="#" tabindex="-1">Previous</a> 
      </li> 
      <li class="page-item "> 
        <a href="#">A</a> 
      </li> 
      <li class="page-item"> 
        <a href="#">B</a> 
      </li> 
      <li class="page-item"> 
        <a href="#">C</a> 
      </li> 
      <li class="page-item"> 
        <span>...</span> 
      </li> 
      <li class="page-item active"> 
        <a href="#">Z</a> 
      </li> 
      <li class="page-item"> 
        <a href="#">Next</a> 
      </li> 
    </ul> 
</body> 
  
</html> 

Output:

Spectre Pagination

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Pagination Class</title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Pagination Class</strong> 
          
    </center> 
    <ul class="pagination"> 
      <li class="page-item page-prev"> 
        <a href="#"> 
          <div class="page-item-subtitle"> 
            Previous 
          </div> 
          <div class="page-item-title h5"> 
            Spectre Nav 
          </div> 
        </a> 
      </li> 
      <li class="page-item page-next"> 
        <a href="#"> 
          <div class="page-item-subtitle"> 
            Next 
          </div> 
          <div class="page-item-title h5"> 
            Spectre Panel 
          </div> 
        </a> 
      </li> 
    </ul> 
</body> 
  
</html> 