Pagination — Lumora

Living Documentation

Pagination patterns for compact navigation across large result sets

This page standardizes Lumora pagination behavior for tables, search results, and feed-like pages. Use the playground to tune size, alignment, edge controls, and active state to generate copy-ready markup.

Variant matrix Alignment modes Live controls Copy-ready snippets

Catalog Blocks 6 Variants, sizing, state, composition, snippets, playground

Visual Modes 4 Default, large, small, and rounded-pill styles

Control Toggles 5 Edges, disabled state, dark links, alignment, active page

Preview State Center — Page 3 Updates live from playground controls

1. Variant Matrix

Canonical pagination styles for table and listing experiences

Default + rounded links

Large and small sizes

2. Interaction Playground

Tune pagination recipe with alignment and state controls

Alignment

Size

Active Page

Show first/last links

Rounded pill links

Disable previous

Disable next

Dark link style

Live Output

Center Page 3

Center aligned, default size, active page 3.

Use copy recipe for generated markup.

3. Alignment Patterns

Place controls based on table density and scanning direction

Start alignment

End alignment

4. State Modeling

Disabled edges, truncated ranges, and active emphasis

First page state

Middle range with truncation

5. Composition Patterns

Pair pagination with result counts and table utility controls

Table footer composition

Showing 61 to 80 of 247 rows

Search results composition

612 matches for “billing status”

6. Real-use Snippets

Copy-ready pagination snippets for default, compact, and ranged flows

Default Pagination

<nav aria-label="Default pagination">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Compact Footer Pager

<div class="d-flex justify-content-between align-items-center">
  <small>Showing 21 to 40 of 247</small>
  <ul class="pagination pagination-sm mb-0">
    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>

Truncated Range

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item disabled"><span class="page-link">...</span></li>
  <li class="page-item"><a class="page-link" href="#">14</a></li>
  <li class="page-item active"><a class="page-link" href="#">15</a></li>
  <li class="page-item"><a class="page-link" href="#">16</a></li>
  <li class="page-item disabled"><span class="page-link">...</span></li>
  <li class="page-item"><a class="page-link" href="#">40</a></li>
</ul>