BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Structure

Pagination

  • Design
  • Code
  • Props

The Pagination component allows users to navigate through a large set of content by dividing it into discrete pages.

Figma image

Anatomy

Figma image

When to use

  • Large Data Sets: Use Pagination when dealing with large data sets that are impractical to display on a single page.
  • Search Results: Ideal for search results where users need to sift through multiple items.
  • Content Collections: Use it for content-heavy sections like blogs, articles, or product listings.

When not to use

  • Small Data Sets: Avoid using Pagination for small data sets where all items can comfortably fit on one page.
  • Continuous Scrolling: If a continuous, seamless scrolling experience is more user-friendly, consider alternatives.
  • Single-Page Content: Do not use Pagination if all content needs to be accessed or viewed on a single page for better user experience.

Alternatives:

  • Infinite Scroll: For a smooth browsing experience where new content loads as the user scrolls down.
  • Load More Button: Offers a middle ground by allowing users to load additional content without leaving the current page.

Accessibility

  • Keyboard Navigation: Ensure all interactive elements within the Pagination component are accessible via keyboard.
  • Screen Reader Support: Use ARIA labels to provide context to screen readers (e.g., aria-label="Page navigation").
  • Focus Management: Maintain logical focus order when users navigate through pages.
  • Visible Focus Indicator: Make sure there is a visible focus indicator for pagination controls when they are tabbed to.
  • Clear Indication of Current Page: Clearly indicate the current page for both sighted and non-sighted users using visual cues and ARIA attributes (e.g., aria-current="page").

On this page

  • Anatomy
  • Accessibility

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme