Skip to content
SkillCodex
Menu

Pagination

Pagination

A set of navigation links that moves among peer pages of one content collection split by quantity.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r1
Sources
5 sources
Status
Published
Read the sources

You may have searched for: show the next page of resultsjump directly to page tenprevious and next links for search results

All phrasings
Save and share

Recognize

Orient within a journey

Try it

Should this locate the page in a hierarchy, move across result pages, or show a process stage?

Pagination

Shared trial context

A person needs to understand where they are and what kind of movement is available without confusing site hierarchy, result pages, and process stages.

Pagination

Mission

Pagination

Activate Next, jump to page 3, then return with Previous while verifying the current-page state.

Records from page 1

Live result

Page 1 of 3 is displayed.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
Page 1 is current and Previous is unavailable at the lower bound.
Edge case
An unknown final total omits a fake last-page destination and keeps Next truthful.

What this example shows

Pagination changes the quantity-based slice of one collection; Breadcrumbs expose hierarchy, while Stepper represents meaningful process stages.

Which fits your need?

Pagination

Search results or collections need stable shareable pages

Breadcrumbs

Pages belong to a hierarchy several levels deep

Which component will you use here?
Difference and sources

Pagination changes the quantity-based slice of one collection; Breadcrumbs expose hierarchy, while Stepper represents meaningful process stages.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Page list

    The ordered set of available page destinations and range gaps.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Orient within a journey

      Pagination belongs to this comparison group.

    • Do not confuse

      Breadcrumbs

      Choose Pagination if one long list or result set is split into stable, shareable pages. Choose Breadcrumbs if the current page has ancestors the user may want to return to.

      Compare this pair
    • Do not confuse

      Stepper

      Choose Pagination if the pages are equivalent slices of a collection and none must be completed before another. Choose Stepper if a linear process has at least three meaningful stages the user completes in order.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: page navigation, pager, page controls

    • show the next page of results
    • jump directly to page ten
    • previous and next links for search results
    • split a long list into numbered pages
    • move to the last results page
    • show which result page I am on

    Choose

    Use it when

    • Search results or collections need stable shareable pages
    • People must jump to a known page or boundary

    Avoid it when

    • Sections differ by meaning or workflow stage
    • Continuous loading is essential and page destinations do not exist

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Go to the next page, select another numbered page, then go back.

      Expected result

      The displayed items match each requested page, and exactly one page is identified as current.

    2. 2. Do this

      Visit the first page and, when the total is known, the last page.

      Expected result

      Unavailable previous or next actions cannot navigate beyond the range; an unknown total does not create a fictitious last page.

    3. 3. Do this

      Navigate with Tab and Enter, then identify the newly displayed results.

      Expected result

      Page links work from the keyboard, ellipses are not extra stops, and an in-place update announces the new page or deliberately focuses its heading.

    Full contract
    1. 1The navigation landmark is named
    2. 2Every available page has a real href
    3. 3Exactly one link has aria-current=page
    4. 4Ellipses are not controls
    5. 5In-place updates manage focus or announce context

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Pagination without breaking its behavior

    # Implement Pagination in your agent
    
    ## Objective
    Implement Pagination for this verified behavior: A set of navigation links that moves among peer pages of one content collection split by quantity.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Pagination matches the need before writing code.
    
    ## Required behavior
    - A page, Previous, or Next link loads another quantity-based slice of the same collection.
    - Pointer, touch, or Enter follows the link; Space keeps its native page-scrolling behavior.
    
    ## States to cover
    - Page 1
    - Page 2
    - Page 3
    
    ## Accessibility
    - ARIA role: nav[aria-label] > ul > li > a[aria-current=page]
    - The primary control or named region for Pagination has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Native navigation follows browser behavior; an in-place result update moves focus to the results heading or announces the new page consistently.
    - Pagination is persistent navigation and is not dismissible.
    - Label numeric destinations as Page N, mark exactly one current page, and keep range gaps noninteractive.
    - Tab and Shift+Tab visit available links
    - Enter activates the focused destination
    - Ellipses never receive focus
    
    ## When not to use
    - Sections differ by meaning or workflow stage
    - Continuous loading is essential and page destinations do not exist
    
    ## Acceptance criteria
    - The navigation landmark is named
    - Every available page has a real href
    - Exactly one link has aria-current=page
    - Ellipses are not controls
    - In-place updates manage focus or announce context
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Pagination on a real journey

    # Verify Pagination after implementation
    
    ## Objective
    Audit the Pagination implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:1ed0302d69d57027278be188c2ebd299470857a6cc76a07837c2381729612a2e

    Diagnose a problem

    Find and fix the Pagination defect

    # Debug Pagination in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Pagination.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - The navigation landmark is named
    - Every available page has a real href
    - Exactly one link has aria-current=page
    - Ellipses are not controls
    - In-place updates manage focus or announce context
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Pagination fix

    # Prevent the Pagination regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Pagination with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:8fbdf58c90260bcb6cff1fd2be62624cc3908504e1febe822426e41cd5a21e08

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:a07ac1ccc685728bd2cac2be50045c880d23787ecc33aeacc0440883c5406fe4

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    nav with ul and a[href]

    NativeUse real page destinations inside a named navigation landmark; client-side updates still preserve URL, history, focus, and current-page semantics.

    Technical details

    Behaviors

    • Change result page

      A page, Previous, or Next link loads another quantity-based slice of the same collection.

    • Follow with native link activation

      Pointer, touch, or Enter follows the link; Space keeps its native page-scrolling behavior.

    States

    • Page 1

      Page 1

    • Page 2

      Page 2

    • Page 3

      Page 3

    State transitions

    • Page 1 → Page 2

      Activate Next to load page 2.

    • Page 2 → Page 3

      Activate page 3 to load that direct destination.

    • Page 3 → Page 2

      Activate Previous to return to page 2.

    • Page 2 → Page 1

      Reset restores page 1.

    Test scenarios

    Context
    An audit log contains three stable pages of records.
    Mission
    Activate Next, jump to page 3, then return with Previous while verifying the current-page state.
    Primary state
    Page 1 is current and Previous is unavailable at the lower bound.
    Edge case
    An unknown final total omits a fake last-page destination and keeps Next truthful.

    Visual signals

    • Previous and Next at the edges
    • Numbered page destinations
    • One current page and noninteractive gaps

    Behavioral signals

    • Every destination is a real link
    • Current page updates with the result slice
    • Bounds and unknown totals do not create dead controls

    Accessibility

    Role
    nav[aria-label] > ul > li > a[aria-current=page]
    Accessible name
    The primary control or named region for Pagination has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    Native navigation follows browser behavior; an in-place result update moves focus to the results heading or announces the new page consistently.
    Dismissal
    Pagination is persistent navigation and is not dismissible.
    Scroll
    The current location stays visible when possible. Navigation or workflow changes land at a meaningful heading without an unexpected scroll jump.
    Announcement
    Label numeric destinations as Page N, mark exactly one current page, and keep range gaps noninteractive.
    Keyboard
    • Tab and Shift+Tab visit available links
    • Enter activates the focused destination
    • Ellipses never receive focus

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • nav with ul and a[href]

      implementationKind
      custom
      nativeElement
      nav with ul and a[href]
      ariaPattern
      named pagination navigation with aria-current=page
      radixPrimitive
      Not applicable
      shadcnRecipe
      Not applicable
      runtimeDependency
      Not applicable
      packageName
      Not applicable
      exportName
      Not applicable
      exactVersion
      Not applicable
      status
      exception
      sourceId
      source-ui-uswds-pagination
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Use real page destinations inside a named navigation landmark; client-side updates still preserve URL, history, focus, and current-page semantics.

      Verify binding source

    Sources

    • U.S. Web Design System: Pagination
      sourceId
      source-ui-uswds-pagination
      kind
      documentation
      canonicalUrl
      https://designsystem.digital.gov/components/pagination/
      publisher
      U.S. Web Design System
      sourceRevision
      http-etag:W/"616ad61e320cdd16bbf75c0d4cbd23b4"
      consultedAt
      2026-08-10
      license
      Not stated
      contentDigest
      sha256:f3dac5b5159ef2307bcfacf7d6bc5538bea9523eac8d24fbf0a770f21610daa5
      status
      verified

      Claim covered: Pagination: documented parts, state APIs, interaction behavior, and implementation limits for USWDS Pagination.

    • WHATWG HTML: The nav element
      sourceId
      source-ui-html-nav
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-2c58d"
      consultedAt
      2026-08-10
      license
      Not stated
      contentDigest
      sha256:cfd126e3b971918ee24c5244457dba55bbde269c92fb879da1ab97dd6fbb89c6
      status
      verified

      Claim covered: Pagination: normative native semantics, states, attributes, and browser behavior for nav.

    • WHATWG HTML: The ol element
      sourceId
      source-ui-html-ordered-list
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-34d05"
      consultedAt
      2026-08-10
      license
      Not stated
      contentDigest
      sha256:4e0627672499c1cfdcd9525e54080baafee74ab80e97b8b446737bfe97d146a5
      status
      verified

      Claim covered: Pagination: normative native semantics, states, attributes, and browser behavior for ol and li.

    • WHATWG HTML: The a element
      sourceId
      source-ui-html-link
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fe0a3d4315ccdf4f171cbb0c61ee6188b0db2dfe13a7c7f1f04f6b37528661f6
      status
      verified

      Claim covered: Pagination: normative native semantics, states, attributes, and browser behavior for a[href].

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Pagination: informative WCAG guidance for evaluating visible keyboard focus appearance.