Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Pagination

    Pagination helps users navigate between large groups of content separated by pages.

    Overview

    Pagination is used for splitting up content into several pages, with a control for navigating to the next or previous page.

    When to Use

    Use pagination when the amount of content required exceeds one page.

    Best Practices

    Identify the current page

    Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.

    Provide various options for navigating

    Previous and next chevrons are the most useful way for the user to move forward or backward through pages of data. Provide an inline select in which users can directly choose the page they wish to navigate to.

    Formatting

    Anatomy

    Pagination anatomy diagram
    1. Icon: Left arrow, allows the user to go to previous page
    2. Container
    3. Current Page Number
    4. Icon: Down filled arrow, allows the user to select a page
    5. Total Pages
    6. Icon: Right arrow, allows the user to go to the next page

    Behavior

    • If there are no more pages prior to the first one shown, the first arrow is in the disabled state.
    • If there are no more pages after what is shown, the last arrow is in the disabled state
    • See Figma UI Kit for disabled state