BX Swiss Component Library

Tab List

There are no notes for this item.

<div class="tab-list">
    <ul class="tab-list__list" id="tab-list">
        <li class="tab-list__tab ">
            <a href="#" class="tab-list__link">Why BX</a>
        </li>
        <li class="tab-list__tab ">
            <a href="#" class="tab-list__link">About BX</a>
        </li>
        <li class="tab-list__tab is-active">
            <a href="#" class="tab-list__link">History</a>
        </li>
        <li class="tab-list__tab ">
            <a href="#" class="tab-list__link">Trading members</a>
        </li>
        <li class="tab-list__tab ">
            <a href="#" class="tab-list__link">Contact</a>
        </li>
    </ul>
    <button class="tab-list__trigger" aria-controls="tab-list">
        <svg viewBox="0 0 24 24" class="icon logo__visual">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
        </svg>
    </button>
</div>
 
<div class="tab-list">
    <ul class="tab-list__list" id="tab-list">
        {{#each tabs }}
        <li class="tab-list__tab {{#if isActive}}is-active{{/if}}">
            <a href="#" class="tab-list__link">{{ title }}</a>
        </li>
        {{/each}}
    </ul>
    <button class="tab-list__trigger" aria-controls="tab-list">
        <svg viewBox="0 0 24 24" class="icon logo__visual">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
        </svg>
    </button>
</div>
 
{
  "tabs": [
    {
      "title": "Why BX"
    },
    {
      "title": "About BX"
    },
    {
      "title": "History",
      "isActive": true
    },
    {
      "title": "Trading members"
    },
    {
      "title": "Contact"
    }
  ]
}