Spectre Pagination

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@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/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:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Pagination Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/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>

Output:

Reference: https://picturepan2.github.io/spectre/components/pagination.html

Explore