Module

Breadcrumbs

Breadcrumbs sollen dem Benutzer veranschaulichen wo er sich derzeit innerhalb der Seite aufhält. Die CSS-Klasse .breadcrumb sorgt dabei für die nötige Formatierung und fügt auch die Trennzeichen ein:

<span class="sr-only">You are here:</span>
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Site</li>
</ol>

Pagination

Soll der Benutzer durch eine Reihe von Pages, Screens oder Bildern geführt werden hilft die .pagination weiter. Die Klasse .active auf einem Listenelement zeigt an, auf welcher Seite sich der Benutzer gerade befindet. Sind Seiten inaktiv kann dem Listenelement die Klasse .disabled zugeordnet werden:

Anmerkung: Das Beispliel verwendet die Zentrierhelfer Komponente für die horizontale Ausrichtung

<div class="h-center">
  <ul class="pagination">
      <li><a href="#"><span class="sr-only">Seite 1</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 2</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 3</span></a></li>
      <li class="active"><a href="#"><span class="sr-only">Seite 4 aktiv</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 5</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 6</span></a></li>
      <li><a href="#"><span class="sr-only">Seite 7</span></a></li>
      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 8 inaktiv</span></a></li>
      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 9 inaktiv</span></a></li>
  </ul>
</div>

Pager

Eine komfortable Navigation zu angrenzenden Seiten, lässt sich mit Pager-Buttons umsetzen. Die .pager-Klasse lässt sich auf Buttons wie Links, gleichermaßen anwenden, um den jeweiligen Umständen semantisch gerecht werden zu können:

<button class="pager">Pager</button>
<button class="pager pager-icon" title="next"><i class="icon icon-navigation-right" aria-hidden="true"></i></button>
<button class="pager"><i class="icon icon-navigation-left" aria-hidden="true"></i>Icon Left</button>
<button class="pager">Icon Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
<button class="pager pager-clean">Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>

Size

<button class="pager pager-small">Small</button>
<button class="pager">Regular</button>
<button class="pager pager-large">Large</button>

Width

<button class="pager pager-block">Grid Based</button>

Aligned & Clean

<div class="clearfix">
    <button class="pager pager-clean left"><i class="icon icon-navigation-left" aria-hidden="true"></i>Previous</button>
    <button class="pager pager-clean right">Next<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
</div>