Skip to main content

Page Control

Dot indicators showing the current page in a sequence.

Selectors

.page-control
Dot indicators for paged content.

Default

HTML 
<nav class="page-control" aria-label="Page control">
  <button aria-label="Page 1"></button>
  <button aria-label="Page 2"></button>
  <button aria-label="Page 3"></button>
  <button aria-label="Page 4"></button>
  <button aria-label="Page 5" aria-current="page"></button>
  <button aria-label="Page 6"></button>
  <button aria-label="Page 7"></button>
  <button aria-label="Page 8"></button>
  <button aria-label="Page 9"></button>
  <button aria-label="Page 10"></button>
</nav>

Few Pages

HTML 
<nav class="page-control" aria-label="Onboarding">
  <button aria-label="Step 1" aria-current="page"></button>
  <button aria-label="Step 2"></button>
  <button aria-label="Step 3"></button>
</nav>

Below Content

Welcome to Cider UI

Apple-aesthetic components for the web.

HTML 
<div class="space-y-4 text-center">
  <div class="rounded-xl border p-8">
    <h4>Welcome to Cider UI</h4>
    <p class="text-sm text-tertiary-foreground mt-1">Apple-aesthetic components for the web.</p>
  </div>
  <nav class="page-control" aria-label="Onboarding steps">
    <button aria-label="Step 1"></button>
    <button aria-label="Step 2" aria-current="page"></button>
    <button aria-label="Step 3"></button>
    <button aria-label="Step 4"></button>
  </nav>
</div>

Disabled

HTML 
<nav class="page-control" aria-label="Page control">
  <button aria-label="Page 1" aria-current="page"></button>
  <button aria-label="Page 2"></button>
  <button aria-label="Page 3" disabled></button>
  <button aria-label="Page 4" disabled></button>
  <button aria-label="Page 5" disabled></button>
</nav>