Alphabetical Pager

The alphabetical pager provides a responsive, flexible pager for alphabetical listings.

Examples and Code

Select exampleDefault

Open Full Example

<ul class="pager-alphabetical">
  <li class="pager-alphabetical__current-item"><span class="pager-alphabetical__current-item">A</span></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/B">B</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/C">C</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/D">D</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/E">E</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/F">F</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/G">G</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/H">H</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/I">I</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/J">J</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/K">K</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/L">L</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/M">M</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/N">N</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/O">O</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/P">P</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/Q">Q</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/R">R</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/S">S</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/T">T</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/U">U</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/V">V</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/W">W</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/X">X</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/Y">Y</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles/Z">Z</a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles"></a></li>
  <li class="pager-alphabetical__item"><a class="pager-alphabetical__item" href="/directory/profiles">ALL</a></li>
</ul>

Guidance

When to Use Alphabetical Pagers

• Multipage alphabetical listings or reports
• In-page jump link for alphabetical lists

When to Consider Another Component

• For numeric listings: Use the standard navbar component for numeric listings.