<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Tab 1</a>
    </li>
    <li>
        <a href="#">Tab 2</a>
    </li>
    <li>
        <a href="#">Tab 3</a>
    </li>
    <li>
        <a href="#">Tab 4</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 5</a>
    </li>
</ul>
<ul class="nav nav-tabs">
  {{#each tabs }}
    <li{{#if modifiers }} class="{{ modifiers }}"{{/if}}>
      <a href="{{ url }}">{{ label }}</a>
    </li>
  {{/each}}
</ul>
__title: Five tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
    modifiers: disabled

Toont navigatie-tabs. Gebaseerd op de Bootstrap nav-tabs component.

Speciale aandacht voor de .disabled modifier:

  • Scriptend moet ervoor gezorgd worden dat de a niet meer reageert;
  • Let op de tabindex bij een disabled tabblad;

Zie ook https://getbootstrap.com/docs/3.3/components/#nav-disabled-links.