This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such as search results.

Links to sets of pages in a paged listing

Requirements

The pagination pattern typically displays items in a row. To ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list inside a <nav> element, and then use CSS to display the layout visually as a row.

Typically, the pagination component will be centered horizontally underneath the content.

Recipe

Choices made

This pattern is laid out using flexbox — one flex container nested inside another. The <nav> element is designated a flex container in order that we can center the list inside using the justify-content property.

The list itself also becomes a flex container to lay the items out as a row. To space the items out we will use a margin on the flex items.

Alternative methods

Once the column-gap property has implementation in browsers this could be used instead of margins to space out the items.

.pagination {
  list-style: none;
  margin: 0; 
  padding: 0;
  display: flex;
  column-gap: 2px;
}

Accessibility concerns

We want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link. To help with this we have added aria-label="pagination" on the <nav> element. 

We have also added some additional content that would be read by a screenreader but is hidden visually, and set the aria-hidden attribute on the paging arrows.

The "See Also" section at the end of this document has links to related accessibility topics.

Browser compatibility

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

Include the compat data for key properties you used, as in the example below which includes align-items.

justify-content

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Full support 52
Full support 52
Partial support 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 20
Notes
Full support 20
Notes
Notes Before Firefox 27, Firefox supported only single-line flexbox.
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11Opera Full support 12.1Safari Full support 9WebView Android Full support 52
Full support 52
Partial support 4.4
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 52
Full support 52
Partial support 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android ? Opera Android Full support 12.1Safari iOS ? Samsung Internet Android Full support Yes
Supported in Grid LayoutChrome Full support 57Edge Full support 16Firefox Full support 52IE No support NoOpera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 52Edge Mobile Full support YesFirefox Android Full support 52Opera Android Full support 43Safari iOS Full support 10.3Samsung Internet Android Full support 6.2

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

column-gap in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome ? Edge ? Firefox Full support 63IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, chrisdavidmills, rachelandrew
Last updated by: mdnwebdocs-bot,