Reiternavigation

• Aktiver Reiter
• Inaktiver Reiter

Die Reiternavigation ist oben zu sehen. Sie besteht aus einer Reiterleiste, die direkt auf eine Seitenüberschrift folgt. Die Überschrift wird dann mit der Klasse has-tabbed-navigation versehen, die dafür sorgt, dass die Linie direkt unter der Überschrift verschwindet, da die Reiter ihre Funktion übernehmen.

<ul class="tabs">
  <li><a href="#tabs" class="tab-active">Aktiver Reiter</a></li>
  <li><a href="#tabs">Inaktiver Reiter</a></li>
</ul>

Falls eine Reiternavigation viele Reiter enthält und nicht mehr in den Satzspiegel passt, können einzelne oder alle Reiter mit der Klasse tab-compact für die jeweiligen a-Elemente kompakter dargestellt werden:

• Aktiver Reiter
• Inaktiver Reiter
• Inaktiver Reiter
• Inaktiver Reiter
• Inaktiver Reiter

<ul class="tabs">
  <li><a href="#tabs" class="tab-active tab-compact">Aktiver Reiter</a></li>
  <li><a href="#tabs" class="tab-compact">Inaktiver Reiter</a></li>
  <li><a href="#tabs" class="tab-compact">Inaktiver Reiter</a></li>
  <li><a href="#tabs" class="tab-compact">Inaktiver Reiter</a></li>
  <li><a href="#tabs" class="tab-compact">Inaktiver Reiter</a></li>
</ul>