Navigation

Pagination

semantic HTML

SSR 링크를 유지하며 데이터 페이지를 이동합니다.

stablefreeSince 0.2

Live example

Page 2

<nav data-standard-component="pagination" aria-label="Search results pages"><a href="?page=1" data-page="1">1</a><a href="?page=2" data-page="2" aria-current="page">2</a><a href="?page=3" data-page="3">3</a></nav><output data-example-output aria-live="polite">Page 2</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.2`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

각 페이지는 실제 href를 가진 링크로 제공하고 현재 링크에는 aria-current=page가 적용됩니다. label로 탐색 영역의 목적을 설명합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->