tabs.hbs

<nav data-tabs class="{{@root.prefix}}--tabs" role="navigation">
  <div class="{{@root.prefix}}--tabs-trigger" tabindex="0">
    <a href="javascript:void(0)" class="{{@root.prefix}}--tabs-trigger-text" tabindex="-1"></a>
    {{#if featureFlags.componentsX}}
      {{ carbon-icon 'ChevronDownGlyph' }}
    {{else}}
      <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    {{/if}}
  </div>
  <ul class="{{@root.prefix}}--tabs__nav {{@root.prefix}}--tabs__nav--hidden" role="tablist">
    {{#each items}}
      <li class="{{@root.prefix}}--tabs__nav-item{{#if selected}} {{@root.prefix}}--tabs__nav-item--selected{{/if}}" data-target=".{{panelClass}}" role="presentation" {{#if ../featureFlags.componentsX}}{{#if disabled}} disabled {{/if}}{{/if}}>
        <a tabindex="0" id="{{linkId}}" class="{{@root.prefix}}--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>