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, MDBPaginationLink } 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, MDBPaginationLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='Page navigation example'>
                <MDBPagination className='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>
                </MDBPagination>
              </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, MDBPaginationLink } 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, MDBPaginationLink } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <nav aria-label='...'>
                <MDBPagination className='mb-0'>
                  <MDBPaginationItem disabled>
                    <MDBPaginationLink>Previous</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem>
                    <MDBPaginationLink href='#'>1</MDBPaginationLink>
                  </MDBPaginationItem>
                  <MDBPaginationItem active aria-current='page'>
                    <MDBPaginationLink>
                      2<span className='visually-hidden'>(current)</span>
                    </MDBPaginationLink>
                  </MDBPaginationItem>
                  <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, MDBPaginationLink } 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, MDBPaginationLink } 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, MDBPaginationLink } 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, MDBPaginationLink } 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, MDBPaginationLink } 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 React.ComponentProps<any> 'ul' Defines tag of the MDBPagination element <MDBPagination tag="section" />
center boolean 'false Centers a pagination. <MDBPagination center />
circle boolean false Changes a pagination style to rounded <MDBPagination circle />
end boolean false Changes a position of the pagination to end <MDBPagination end />
size "lg" | "sm" '' Changes size to pagination elements <MDBPagination size="lg/sm" />
start boolean false Changes a position of the pagination to start <MDBPagination start />
ref React.Ref<any> A reference to the MDBPagination component <MDBPagination ref={someRef} />

MDBPaginationItem

Name Type Default Description Example
tag React.ComponentProps<any> 'li' Defines tag of the MDBPaginationItem element <MDBPaginationItem tag="section" />
active boolean false Adds an active class to element and aria-current="page" <MDBPaginationItem active />
disabled boolean false Adds a disabled class to element. <MDBPaginationItem disabled />
ref React.Ref<any> A reference to the MDBPaginationItem component. <MDBPaginationItem ref={someRef} />

CSS variables

        
            
        // .pagination
        --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
        --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
        @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
        --#{$prefix}pagination-color: #{$pagination-color};
        --#{$prefix}pagination-bg: #{$pagination-bg};
        --#{$prefix}pagination-border-width: #{$pagination-border-width};
        --#{$prefix}pagination-border-color: #{$pagination-border-color};
        --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
        --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
        --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
        --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
        --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
        --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
        --#{$prefix}pagination-active-color: #{$pagination-active-color};
        --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
        --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
        --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
        --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
        --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
          
        --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
        --#{$prefix}pagination-active-box-shadow: #{$pagination-active-box-shadow};
        --#{$prefix}pagination-active-transition: #{$pagination-active-transition};
        --#{$prefix}pagination-active-font-weight: #{$pagination-active-font-weight};
        --#{$prefix}pagination-circle-border-radius: #{$pagination-circle-border-radius};
        --#{$prefix}pagination-circle-padding-x: #{$pagination-circle-padding-x};
        --#{$prefix}pagination-circle-padding-l-lg: #{$pagination-circle-lg-padding-left};
        --#{$prefix}pagination-circle-padding-r-lg: #{$pagination-circle-lg-padding-right};
        --#{$prefix}pagination-circle-padding-l-sm: #{$pagination-circle-sm-padding-left};
        --#{$prefix}pagination-circle-padding-r-sm: #{$pagination-circle-sm-padding-right};

SCSS variables

        
            
        $pagination-padding-y: 0.375rem;
        $pagination-padding-x: 0.75rem;
        $pagination-padding-y-sm: 0.25rem;
        $pagination-padding-x-sm: 0.5rem;
        $pagination-padding-y-lg: 0.75rem;
        $pagination-padding-x-lg: 1.5rem;

        $pagination-bg: $white;
        $pagination-border-width: $border-width;
        $pagination-margin-start: ($pagination-border-width * -1);
        $pagination-border-color: $gray-300;

        $pagination-focus-color: var(--#{$prefix}link-hover-color);
        $pagination-focus-bg: $gray-200;
        $pagination-focus-box-shadow: $input-btn-focus-box-shadow;
        $pagination-focus-outline: 0;

        $pagination-hover-bg: $gray-200;
        $pagination-hover-border-color: $gray-300;

        $pagination-active-color: $component-active-color;

        $pagination-disabled-color: $gray-600;
        $pagination-disabled-bg: $white;
        $pagination-disabled-border-color: $gray-300;

        $pagination-border-radius-sm: $border-radius-sm;
        $pagination-border-radius-lg: $border-radius-lg;

        $pagination-font-size: 0.9rem;
        $pagination-color: $body-color;
        $pagination-transition: all 0.3s linear;
        $pagination-border-radius: 0.25rem;

        $pagination-hover-color: $pagination-color;
        $pagination-active-transition: all 0.2s linear;

        $pagination-circle-border-radius: 50%;
        $pagination-circle-padding-x: 0.841rem;

        $pagination-circle-lg-padding-left: 1.399414rem;
        $pagination-circle-lg-padding-right: 1.399415rem;

        $pagination-circle-sm-padding-left: 0.696rem;
        $pagination-circle-sm-padding-right: 0.688rem;

        $pagination-active-bg: #e3ebf7;
        $pagination-active-color: #285192;
        $pagination-active-box-shadow: 0 4px 9px -4px #e3ebf7;
        $pagination-active-font-weight: 500;