Tabs

Tabs organise content across different screens with a simple navigation.

Example

My Item 1 content
My Item 2 content
My Item 3 content
My Item 4 content
My Item 5 content
My Item 6 content
<div class="nj-tab">
  <div class="nj-tab__items" role="tablist">
    <button class="nj-tab__item nj-tab__item--active" id="tab-item-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-content-1">Item 1</button>
    <button class="nj-tab__item"  id="tab-item-2" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-2" disabled>Item 2</button>
    <button class="nj-tab__item"  id="tab-item-3" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-3" >Item 3</button>
    <button class="nj-tab__item"  id="tab-item-4" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-4" >Item 4</button>
    <button class="nj-tab__item"  id="tab-item-5" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-5" >Item 5</button>
    <button class="nj-tab__item"  id="tab-item-6" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-5" >Item 6</button>
  </div>
  <div class="pt-2">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" aria-labelledby="tab-item-1">My Item 1 content</div>
    <div class="nj-tab__content" id="tab-content-2" aria-labelledby="tab-item-2">My Item 2 content</div>
    <div class="nj-tab__content" id="tab-content-3" aria-labelledby="tab-item-3">My Item 3 content</div>
    <div class="nj-tab__content" id="tab-content-4" aria-labelledby="tab-item-4">My Item 4 content</div>
    <div class="nj-tab__content" id="tab-content-5" aria-labelledby="tab-item-5">My Item 5 content</div>
    <div class="nj-tab__content" id="tab-content-6" aria-labelledby="tab-item-6">My Item 6 content</div>
  </div>
</div>

Compact

My Item 1 content
My Item 2 content
My Item 3 content
<div class="nj-tab nj-tab--compact">
  <div class="nj-tab__items" role="tablist">
    <button class="nj-tab__item nj-tab__item--active" id="tab-item-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-content-1">Item 1</button>
    <button class="nj-tab__item"  id="tab-item-2" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-2" disabled>Item 2</button>
    <button class="nj-tab__item"  id="tab-item-3" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-3" >Item 3</button>
  </div>
  <div class="pt-2">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" aria-labelledby="tab-item-1">My Item 1 content</div>
    <div class="nj-tab__content" id="tab-content-2" aria-labelledby="tab-item-2">My Item 2 content</div>
    <div class="nj-tab__content" id="tab-content-3" aria-labelledby="tab-item-3">My Item 3 content</div>
  </div>
</div>

Spacious

My Item 1 content
My Item 2 content
My Item 3 content
<div class="nj-tab nj-tab--spacious">
  <div class="nj-tab__items" role="tablist">
    <button class="nj-tab__item nj-tab__item--active" id="tab-item-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-content-1">Item 1</button>
    <button class="nj-tab__item"  id="tab-item-2" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-2" disabled>Item 2</button>
    <button class="nj-tab__item"  id="tab-item-3" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-3" >Item 3</button>
  </div>
  <div class="pt-2">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" aria-labelledby="tab-item-1">My Item 1 content</div>
    <div class="nj-tab__content" id="tab-content-2" aria-labelledby="tab-item-2">My Item 2 content</div>
    <div class="nj-tab__content" id="tab-content-3" aria-labelledby="tab-item-3">My Item 3 content</div>
  </div>
</div>

Stretched

My Item 1 content
My Item 2 content
My Item 3 content
<div class="nj-tab nj-tab--stretched">
  <div class="nj-tab__items" role="tablist">
    <button class="nj-tab__item nj-tab__item--active" id="tab-item-1" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-content-1">Item 1</button>
    <button class="nj-tab__item"  id="tab-item-2" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-2" disabled>Item 2</button>
    <button class="nj-tab__item"  id="tab-item-3" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-3" >Item 3</button>
  </div>
  <div class="p-1">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" aria-labelledby="tab-item-1">My Item 1 content</div>
    <div class="nj-tab__content" id="tab-content-2" aria-labelledby="tab-item-2">My Item 2 content</div>
    <div class="nj-tab__content" id="tab-content-3" aria-labelledby="tab-item-3">My Item 3 content</div>
  </div>
</div>

Properties

CSS Classes Description
nj-tab__item--active set nj-tab__item as selected
nj-tab__content--active set nj-tab__content visible
Tag Attribute Description
disabled Disable tab nj-tab__item