USER INTERFACE

Pagination & Breadcrumbs

Moving through long lists and deep pages — and always knowing where you are.
THEME
DENSITY
01

Pagination · Playground

248 invoices — page, load more or scroll
Invoicesavava.studio/invoices?page=1
NUMBERCLIENTAMOUNTSTATUS
AV-2026-248NTNordic Thread€800Paid
AV-2026-247LCLumen Coffee€2,173Overdue
AV-2026-246BHBryggen Hotel€3,546Viewed
AV-2026-245FOFjord Outdoor€4,919Sent
AV-2026-244ASAtlas Studio€6,292Draft
AV-2026-243KCKaya Ceramics€7,665Paid
AV-2026-242MOMira Optics€9,038Overdue
AV-2026-241NTNordic Thread€10,411Viewed
AV-2026-240LCLumen Coffee€11,784Sent
AV-2026-239BHBryggen Hotel€13,157Draft
AV-2026-238FOFjord Outdoor€14,530Paid
AV-2026-237ASAtlas Studio€15,903Overdue
AV-2026-236KCKaya Ceramics€17,276Viewed
AV-2026-235MOMira Optics€18,649Sent
AV-2026-234NTNordic Thread€20,022Draft
AV-2026-233LCLumen Coffee€21,395Paid
AV-2026-232BHBryggen Hotel€22,768Overdue
AV-2026-231FOFjord Outdoor€24,141Viewed
AV-2026-230ASAtlas Studio€1,514Sent
AV-2026-229KCKaya Ceramics€2,887Draft
1–20 of 248
Rows
Page 1 of 13 · ← → keys work after you click the list
<Pagination type="numbers" shape="pill" page={1} total={248} perPage={20} siblings={1} boundaries={1} summary perPage />
Settings
TYPE
SHAPE
SIBLINGS · 1
EDGES · 1
SHOW
Click the preview, then use ← → to page.
02

Pagination · Variants

Six patterns for six kinds of list
Table footerrows per page · range · ‹ ›
AV-2026-248NTNordic Thread€800Paid
AV-2026-247LCLumen Coffee€2,173Overdue
AV-2026-246BHBryggen Hotel€3,546Viewed
AV-2026-245FOFjord Outdoor€4,919Sent
AV-2026-244ASAtlas Studio€6,292Draft
Rows per page
1–5 of 248
Compact · mobile‹ 7 / 13 › · 44 px targets
Atlas Studio€1,514Kaya Ceramics€2,887Mira Optics€4,260
Load morebutton · progress · spinner
IMG_4100IMG_4101IMG_4102IMG_4103IMG_4104IMG_4105
Showing 6 of 30 photos
Infinite scrollskeletons · end state
AV-2026-248NTNordic Thread€800Paid
AV-2026-247LCLumen Coffee€2,173Overdue
AV-2026-246BHBryggen Hotel€3,546Viewed
AV-2026-245FOFjord Outdoor€4,919Sent
AV-2026-244ASAtlas Studio€6,292Draft
AV-2026-243KCKaya Ceramics€7,665Paid
AV-2026-242MOMira Optics€9,038Overdue
AV-2026-241NTNordic Thread€10,411Viewed
Loaded 8 of 40 · scroll inside the box
Cursor · Newer / Olderfor feeds and chat
ActivityToday – Oct 16
Ana Petit uploaded 12 retouched frames10 min
Lena Holm commented on Hero 041 h
Olivia Lane moved Spring 27 to Post3 h
Leo Park shared the BTS rough cutYesterday
A–Z indexempty letters dimmed
N2 clients
NTNordic Thread5 projectsNSNorrland Skis5 projects
03

Breadcrumbs · Playground

Separator, style, collapse and truncation
YOU ARE HERESelects3 levels folded into “…” — click it
DEPTH6 levels
<nav aria-label="Breadcrumb"> <a href="…">Home</a> / <a href="…">Projects</a> / <a href="…">Nordic Thread</a> / <a href="…">Spring 27 campaign</a> / <a href="…">Shoot · Mývatn, Iceland</a> / <span aria-current="page">Selects</span> </nav>
Settings
SEPARATOR
STYLE
OPTIONS
04

Breadcrumbs · Variants

Projects, files, mobile, wizards and history
Projectpath + status at the end
Post-production
File path · switcherclick › to jump to a sibling
Files / Spring 27 / Selects / Day 2
Mobile · Backone level up + title
SelectsHome / Projects / Nordic Thread / Spring 27 / Selects
Wizard stepsdone = link · current · future disabled
Step 3 of 4 · Payment
From history“Came from” + recent trail
AV-2026-041
RECENT
05

Rules & a11y

Markup, checklist and which pattern when
Markup
<nav aria-label="Pagination">
  <a href="?page=6" aria-label="Previous page">‹</a>
  <a href="?page=1">1</a>
  <span aria-hidden="true">…</span>
  <a href="?page=7" aria-current="page">7</a>
  <a href="?page=8" aria-label="Next page">›</a>
</nav>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/projects">Projects</a></li>
    <li><a href="/clients/nordic">Nordic Thread</a></li>
    <li aria-current="page">Spring 27</li>
  </ol>
</nav>
Checklist6 of 8 checked
NUMBERSPeople need to jump, compare or come back to a place.Invoices, Data List, search
LOAD MOREBrowsing visual items; keeps the footer reachable.Product grid, photos
INFINITEAn endless, time-ordered stream with no footer.Activity, chat history
CURSORLive data where page 7 changes every minute.Feeds, logs, API lists
DO✓Show the range: “21–40 of 248”✓Keep the page in the URL✓Disable ‹ › at the ends instead of hiding them✓Fold long breadcrumb paths into “…”✓Make the last crumb plain text
DON’T✕Show every page number for 50+ pages✕Use infinite scroll where people need the footer✕Reset to page 1 after viewing a row✕Use breadcrumbs as the only navigation✕Truncate the current crumb so it can’t be read