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 class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="tab-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3">
      <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 value="Tab 1">Tab 1</option>
    <option value="Tab 2">Tab 2</option>
    <option value="Tab 3">Tab 3</option>
  </select>
  <ul class="tabs__panels">
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3">
      <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 class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="tab-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1">
      <div class="js-tabs">
        <ul class="tabs__list" role="tablist">
          <li class="tabs__item" role="presentation">
            <button class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="tab-1">Tab 1</button>
          </li>
          <li class="tabs__item" role="presentation">
            <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-2">Tab 2</button>
          </li>
          <li class="tabs__item" role="presentation">
            <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-3">Tab 3</button>
          </li>
        </ul>
        <ul class="tabs__panels">
          <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1">
            <div class="content">
              <p>Nested Panel 1</p>
            </div>
          </li>
          <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2">
            <div class="content">
              <p>Nested Panel 2</p>
            </div>
          </li>
          <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3">
            <div class="content">
              <p>Nested Panel 3</p>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3">
      <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 class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="tab-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3">
      <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 class="tabs__button js-tabs__button is-selected" href="#" role="tab" aria-controls="tab-1">Tab 1</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-2">Tab 2</button>
    </li>
    <li class="tabs__item" role="presentation">
      <button class="tabs__button js-tabs__button" href="#" role="tab" aria-controls="tab-3">Tab 3</button>
    </li>
  </ul>
  <ul class="tabs__panels">
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-1">
      <div class="content">
        <p>Panel 1</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-2">
      <div class="content">
        <p>Panel 2</p>
      </div>
    </li>
    <li class="tabs__panel js-tabs__panel" role="tabpanel" aria-labelledby="tab-3">
      <div class="content">
        <p>Panel 3</p>
      </div>
    </li>
  </ul>
</div>

Examples

Basic

Dropdown

Nested Tabs

Mobile Only Tabs

Show Second Tab