Pagination

Vue 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". 

        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination>
                  <MDBPageNav prev></MDBPageNav>
                  <MDBPageItem href="#">1</MDBPageItem>
                  <MDBPageItem href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                  <MDBPageNav next></MDBPageNav>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            </script>

Icons

Looking to use an icon or symbol in place of text for some pagination links? Use icon prop for MDBPageNav and MDBPageItem components to enable icons. For MDBPageItem you can pass your own icons. Be sure to provide label prop to support proper support for screen readers. 

        
            
          <template>
            <nav aria-label="Page navigation example">
              <MDBPagination>
                <MDBPageNav prev icon></MDBPageNav>
                <MDBPageItem href="#">1</MDBPageItem>
                <MDBPageItem icon label="dot symbol" href="#">•</MDBPageItem>
                <MDBPageItem href="#">3</MDBPageItem>
                <MDBPageNav next icon></MDBPageNav>
              </MDBPagination>
            </nav>
          </template>
        
        
    
        
            
          <script>
            import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            
            export default { 
              components: { 
                MDBPagination, 
                MDBPageNav, 
                MDBPageItem 
              }, 
            };
          </script>
        
        
    
        
            
          <script setup lang="ts">
            import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
          </script>

Disabled and active states

Pagination links are customizable for different circumstances. Use disabled propfor 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. 

        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination>
                  <MDBPageNav prev disabled></MDBPageNav>
                  <MDBPageItem href="#">1</MDBPageItem>
                  <MDBPageItem icon active href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                  <MDBPageNav next icon></MDBPageNav>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            </script>

Sizing

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

        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination lg>
                  <MDBPageItem active href="#">1</MDBPageItem>
                  <MDBPageItem href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            </script>
          
        
    
        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination lg>
                  <MDBPageItem active href="#">1</MDBPageItem>
                  <MDBPageItem href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
          <script setup lang="ts">
            import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
          </script>

Shape

Add circle prop to change the shape to a circle.

        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination circle>
                  <MDBPageNav prev></MDBPageNav>
                  <MDBPageItem href="#">1</MDBPageItem>
                  <MDBPageItem active href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                  <MDBPageNav next></MDBPageNav>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            </script>

Alignment

Change the alignment of pagination components with flexbox utilities.

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

        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination class="justify-content-center">
                  <MDBPageNav prev></MDBPageNav>
                  <MDBPageItem href="#">1</MDBPageItem>
                  <MDBPageItem href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                  <MDBPageNav next></MDBPageNav>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            </script>

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

        
            
            <template>
              <nav aria-label="Page navigation example">
                <MDBPagination class="justify-content-end">
                  <MDBPageNav prev></MDBPageNav>
                  <MDBPageItem href="#">1</MDBPageItem>
                  <MDBPageItem href="#">2</MDBPageItem>
                  <MDBPageItem href="#">3</MDBPageItem>
                  <MDBPageNav next></MDBPageNav>
                </MDBPagination>
              </nav>
            </template>
          
        
    
        
            
            <script>
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBPagination,
                  MDBPageNav,
                  MDBPageItem
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPagination, MDBPageNav, MDBPageItem } from 'mdb-vue-ui-kit';
            </script>

Pagination - API

Import

        
            
        <script>
          import { 
            MDBPagination,
            MDBPageNav,
            MDBPageItem
          } from 'mdb-vue-ui-kit';
        </script>

Properties

Pagination

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBPagination element <MDBPagination tag="div" />
circle Boolean false Changes item style into circle <MDBPagination circle />
lg Boolean false Changes pagination size <MDBPagination lg />
sm Boolean false Changes pagination size <MDBPagination sm />

Page Nav

Name Type Default Description Example
tag String 'li' Defines tag of the MDBPageNav element <MDBPageNav tag="div" />
disbled Boolean 'false' Sets disabled state for MDBPageNav element. Adds tabindex="-1" attribute to the element. <MDBPageNav disabled />
prev Boolean 'false Indicates MDBPageNav as previous page controller. <MDBPageNav prev />
next Boolean 'false Indicates MDBPageNav as next page controller. <MDBPageNav next />
icon Boolean 'false Sets arrow icons for previous or next page controller instead of text <MDBPageNav prev icon />

Page Item

Name Type Default Description Example
tag String 'li' Defines tag of the MDBPageItem element <MDBPageItem tag="div" />
active Boolean 'false' Sets active state for MDBPageItem element <MDBPageItem active />
disabled Boolean 'false' Sets disabled state for MDBPageItem element <MDBPageItem disabled />
icon Boolean 'false' Gives screen readers information that MDBPageItem content is icon instead of text. Use with label prop. <MDBPageItem icon />
label String Sets label for screen readers when MDBPageItem uses icon instead of text. <MDBPageItem icon label="dot symbol" href="#">•</MDBPageItem>

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;