Pagination

React Bootstrap 5 Pagination component

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic example

Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages". 


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='Page navigation example'>
                <MDBPagination className='mb-0'>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Previous</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>2</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Next</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }

Icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes. 


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='Page navigation example'>
                <ul className='pagination mb-0'>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#' aria-label='Previous'>
                      <span aria-hidden='true'>«</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>2</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#' aria-label='Next'>
                      <span aria-hidden='true'>»</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                </ul>
              </nav>
            );
          }

Disabled and active states

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality. 


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='...'>
                <MDBPagination className='mb-0'>
                  <MDBPaginationItem disabled>
                    <MDBPaginationLink href='#' tabIndex={-1} aria-disabled='true'>
                      Previous
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem active aria-current='page'>
                    <MDBPaginationLink href='#'>
                      2 <span className='visually-hidden'>(current)</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Next</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles. 


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='...'>
                <ul className='pagination mb-0'>
                  <li className='page-item disabled'>
                    <span className='page-link'>Previous</span>
                  </li>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <li className='page-item active' aria-current='page'>
                    <span className='page-link'>
                      2<span className='visually-hidden'>(current)</span>
                    </span>
                  </li>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Next</MDBPaginationLink>
                  </MDBPaginationItem>
                </ul>
              </nav>
             );
          }

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes. 


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='...'>
                <MDBPagination size='lg' className='mb-0'>
                  <MDBPaginationItem className='page-item active' aria-current='page'>
                    <MDBPaginationLink tag='span' className='page-link'>
                      1<span className='visually-hidden'>(current)</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>2</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }
        

          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='...'>
                <MDBPagination size='sm' className='mb-0'>
                  <MDBPaginationItem active>
                    <MDBPaginationLink tag='span'>
                      1<span className='visually-hidden'>(current)</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>2</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }

Shape

Add .pagination-circle class to change the shape to a circle.


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='...'>
                <MDBPagination circle className='mb-0'>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#' tabIndex={-1} aria-disabled='true'>
                      Previous
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem active>
                    <MDBPaginationLink href='#'>
                      2 <span className='visually-hidden'>(current)</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Next</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }

Alignment

Change the alignment of pagination components with flexbox utilities.

Use .justify-content-center class to center the pagination.


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='Page navigation example'>
                <MDBPagination center className='mb-0'>
                  <MDBPaginationItem disabled>
                    <MDBPaginationLink href='#' tabIndex={-1} aria-disabled='true'>
                      Previous
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>2</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Next</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }

Use .justify-content-end class to align the pagination to the right.


          import React from 'react';
          import { MDBPagination, MDBPaginationItem, MDBPaginationItem } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='Page navigation example'>
                <MDBPagination end className='mb-0'>
                  <MDBPaginationItem disabled>
                    <MDBPaginationLink href='#' tabIndex={-1} aria-disabled='true'>
                      Previous
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>2</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>3</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>Next</MDBPaginationLink>
                  </MDBPaginationItem>
                </MDBPagination>
              </nav>
            );
          }

Pagination - API

Import


        import { MDBPagination, MDBPaginationItem, MDBPaginationLink } from 'mdb-react-ui-kit';

Properties

MDBPagination

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBPagination element <MDBPagination tag="section" />
className String '' Add custom class to MDBPagination <MDBPagination className="class" />
center Boolean 'false Center pagination. <MDBPagination center />
circle Boolean false Change pagination style to rounded <MDBPagination circle />
end Boolean false Change position of pagination to end <MDBPagination end />
size String '' Add size to pagination elements <MDBPagination size="lg/sm" />
start Boolean start Change position of pagination to start <MDBPagination start />

MDBPaginationItem

Name Type Default Description Example
tag String 'li' Defines tag of the MDBPaginationItem element <MDBPaginationItem tag="section" />
className String '' Add custom class to MDBPaginationItem <MDBPaginationItem className="class" />
active Boolean false Add active class to element and aria-current="page" <MDBPaginationItem active />
disabled Boolean 'false' Add disabled class to element. <MDBPaginationItem disabled />