Nebo Front-End Library

Basic

Panel 1
Panel 2
Panel 3

<div class="tabs js-tabs">
  <ul class="tabs__list" role="tablist">
    <li class="tabs__item" role="presentation">
      <button id="tab-1" class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="panel-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-2" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-3" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li id="panel-1" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li id="panel-2" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li id="panel-3" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3" tabindex="0">
      <div class="content">
        <p>Panel 3</p>
      </div>
    </li>
  </ul>
</div>

Dropdown

Panel 1
Panel 2
Panel 3

<div class="tabs js-tabs">
  <select class="js-select js-tabs__dropdown">
    <option id="tab-1" value="Tab 1" aria-controls="panel-1">Tab 1</option>
    <option id="tab-2" value="Tab 2" aria-controls="panel-2">Tab 2</option>
    <option id="tab-3" value="Tab 3" aria-controls="panel-3">Tab 3</option>
  </select>
  <ul class="tabs__panels">
    <li id="panel-1" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li id="panel-2" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li id="panel-3" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3" tabindex="0">
      <div class="content">
        <p>Panel 3</p>
      </div>
    </li>
  </ul>
</div>

Nested Tabs

- Nested Panel 1
- Nested Panel 2
- Nested Panel 3
Panel 2
Panel 3

<div class="tabs js-tabs">
  <ul class="tabs__list" role="tablist">
    <li class="tabs__item" role="presentation">
      <button id="tab-1" class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="panel-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-2" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-3" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li id="panel-1" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
      <div class="js-tabs">
        <ul class="tabs__list" role="tablist">
          <li class="tabs__item" role="presentation">
            <button id="tab-1-1" class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="panel-1">Tab 1</button>
          </li>
          <li class="tabs__item" role="presentation">
            <button id="tab-1-2" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-2">Tab 2</button>
          </li>
          <li class="tabs__item" role="presentation">
            <button id="tab-1-3" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-3">Tab 3</button>
          </li>
        </ul>
        <ul class="tabs__panels">
          <li id="panel-1-1" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1-1" tabindex="0">
            <div class="content">
              <p>Nested Panel 1</p>
            </div>
          </li>
          <li id="panel-1-2" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1-2" tabindex="0">
            <div class="content">
              <p>Nested Panel 2</p>
            </div>
          </li>
          <li id="panel-1-3" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1-3" tabindex="0">
            <div class="content">
              <p>Nested Panel 3</p>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li id="panel-2" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li id="panel-3" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3" tabindex="0">
      <div class="content">
        <p>Panel 3</p>
      </div>
    </li>
  </ul>
</div>

Mobile Only Tabs

Panel 1
Panel 2
Panel 3

<div class="tabs js-tabs" data-tabs-breakpoint="(min-width: 768px)">
  <ul class="tabs__list" role="tablist">
    <li class="tabs__item" role="presentation">
      <button id="tab-1" class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="panel-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-2" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-3" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li id="panel-1" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li id="panel-2" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li id="panel-3" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3" tabindex="0">
      <div class="content">
        <p>Panel 3</p>
      </div>
    </li>
  </ul>
</div>

Show Second Tab

Panel 1
Panel 2
Panel 3

<div class="tabs js-tabs" data-tabs-shown="1">
  <ul class="tabs__list" role="tablist">
    <li class="tabs__item" role="presentation">
      <button id="tab-1" class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="panel-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-2" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button id="tab-3" class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="panel-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li id="panel-1" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li id="panel-2" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li id="panel-3" class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3" tabindex="0">
      <div class="content">
        <p>Panel 3</p>
      </div>
    </li>
  </ul>
</div>

Examples

Basic

Dropdown

Nested Tabs

Mobile Only Tabs

Show Second Tab