Pagination (pagination)

Indicate a series of related content exists across multiple pages.

🔗 External documentation.

ID Label Description Schema
items Pagination items
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      
            id: pagination
label: Pagination
description: 'Indicate a series of related content exists across multiple pages. '
homepage: 'https://getbootstrap.com/docs/4.0/components/pagination/'
variants:
    default:
        id: default
        label: Default
    lg:
        id: lg
        label: Larger
    sm:
        id: sm
        label: Smaller
props:
    items:
        id: items
        label: 'Pagination items'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': pagination
            items:
                -
                    url: '#'
                    title: '« First'
                -
                    url: '#'
                    title: '‹ Previous'
                -
                    title: '4'
                -
                    url: '#'
                    title: '5'
                -
                    url: '#'
                    title: '6'
                -
                    url: '#'
                    title: 'Next ›'
                -
                    url: '#'
                    title: 'Last »'

          

Default ( default )

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#"> « First </a> </li> <li class="page-item"> <a class="page-link" href="#"> ‹ Previous </a> </li> <li class="page-item active"> <span class="page-link"> <span class="visually-hidden">Current page</span>4</span> </li> <li class="page-item"> <a class="page-link" href="#"> 5 </a> </li> <li class="page-item"> <a class="page-link" href="#"> 6 </a> </li> <li class="page-item"> <a class="page-link" href="#"> Next › </a> </li> <li class="page-item"> <a class="page-link" href="#"> Last » </a> </li> </ul> </nav>

Larger ( lg )

<nav aria-label="Pagination"> <ul class="pagination-lg pagination"> <li class="page-item"> <a class="page-link" href="#"> « First </a> </li> <li class="page-item"> <a class="page-link" href="#"> ‹ Previous </a> </li> <li class="page-item active"> <span class="page-link"> <span class="visually-hidden">Current page</span>4</span> </li> <li class="page-item"> <a class="page-link" href="#"> 5 </a> </li> <li class="page-item"> <a class="page-link" href="#"> 6 </a> </li> <li class="page-item"> <a class="page-link" href="#"> Next › </a> </li> <li class="page-item"> <a class="page-link" href="#"> Last » </a> </li> </ul> </nav>

Smaller ( sm )

<nav aria-label="Pagination"> <ul class="pagination-sm pagination"> <li class="page-item"> <a class="page-link" href="#"> « First </a> </li> <li class="page-item"> <a class="page-link" href="#"> ‹ Previous </a> </li> <li class="page-item active"> <span class="page-link"> <span class="visually-hidden">Current page</span>4</span> </li> <li class="page-item"> <a class="page-link" href="#"> 5 </a> </li> <li class="page-item"> <a class="page-link" href="#"> 6 </a> </li> <li class="page-item"> <a class="page-link" href="#"> Next › </a> </li> <li class="page-item"> <a class="page-link" href="#"> Last » </a> </li> </ul> </nav>