<nav data-tabs class="bx--tabs" role="navigation">
  <div class="bx--tabs-trigger" tabindex="0">
    <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
    <svg width="10" height="5" viewBox="0 0 10 5">
      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
    </svg>
  </div>
  <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
    {{#each items}}
      <li class="bx--tabs__nav-item{{#if selected}} bx--tabs__nav-item--selected{{/if}}" data-target=".{{panelClass}}" role="presentation">
        <a id="{{linkId}}" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="{{panelId}}"{{#if selected}} aria-selected="true"{{/if}}>{{label}}</a>
      </li>
    {{/each}}
  </ul>
</nav>
<!-- The markup below is for demonstration purposes only -->
<div style="padding: 1rem;">
  {{#each items}}
    <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}" aria-hidden="{{not selected}}"{{#if (not selected)}} hidden{{/if}}>
      <p>{{panelContent}}</p>
    </div>
  {{/each}}
</div>
