Portland Community College | Portland, Oregon Portland Community College

Web services

Pagination

Pagination links let users navigate through a series of steps or sequential content, with each step on a different page. We use two different types of pagination:

  • Numbers: Users can navigate by clicking on the numbers or by using the back and next arrows.
  • Letters: Good for A to Z index lists (like the Programs page, IT services list, and the Intranet forms page). Letters with entries link to that section of the page, and letters without entries are grayed out and inactive.

Styling

Pagination looks similar to other websites that have sequential series of pages, such as Google Search.

  • Numbers: Links are displayed as numbers in chronological order. When you hover over the numbers, that page’s title appears. Users can also use the back and next arrows to navigate. A turquoise box shows your current location in the series.
  • Letters: Active letters look like buttons (teal background with white text), and inactive letters are grayed out. The letters go across the page in a horizontal row.
Responsive behavior
  • Numbers: On large screens, the pagination links display in a long, horizontal line. On small screens, the back and next arrows stack on top of the numbers. On very small screens, the numbers wrap to form a grid.
  • Letters: On large screens, the pagination links display in a long, horizontal line. As soon as the page becomes too narrow, each letter box will drop to the next line and form a second (or third) row.
Numbers pagination development info
  • Stylesheet location: /_source/styles/components/_pagination.scss
  • id="pagination"
  • JavaScript can generate the pagination (as opposed to building it by hand, which is also an option). If there’s a need, we can move the script from Panther Tracks to the general website.
  • <div id="pagination">
  <ol class="local-nav">
    <li class="back-button">
      <a href="" class="prev">
        back 
        <span>number of previous page</span> 
        <span class="epithet">Title of previous page</span>
      </a>
    </li>
    <li>
      <a href="">
        <span>1</span>
        <span class="epithet">Title of page 1</span>
      </a>
    </li>
    <li>
      <a href="">
        <span>2</span>
        <span class="epithet">Title of page 2</span>
      </a>
    </li>
    <li>
      <a href="">
        <span>3</span>
        <span class="epithet">Title of page 3</span>
      </a>
    </li>
    <li class="next-button">
      <a href="" class="next">
        next 
        <span>number of next page</span> 
        <span class="epithet">Title of next page</span>
      </a>
    </li>
  </ol>
</div>
Letters pagination development info
  • Stylesheet location: /_source/styles/components/_pagination.scss
  • class="azIndex"
  • JavaScript can generate the pagination (as opposed to building it by hand, which is also an option).
  • <!-- the pagination -->
<div class="azIndex">
  <ul>
    <li data-index="A"><a href="#a">A</a></li> <!-- active -->
    <li class="jxAzEmpty" data-index="B"><a href="#b">B</a></li> <!-- inactive -->
    <li data-index="C"><a href="#c">C</a></li> <!-- active -->    
    ...
  </ul>
</div>

<!-- the content -->
<div class="jxAzList"> <!-- could also be an indexlist -->
  <div data-index="A">
    <h4 id="A">A</h4> <!-- whatever heading level you need -->
    <!-- ul if indexlist, or other content -->
    <!-- no B, so go straight to C (in this example) -->
    <h4 id="C">C</h4>
    ...
  </div>
</div>
</div>

Pagination examples

Numbers pagination
Letters pagination

Jump to: