Tabs

Tabs organise content across different screens with a simple navigation.

Angular

React

Vanilla

Figma

Last updated v5.0.0

Example

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

<div class="nj-tab">
  <div class="nj-tab__items" role="tablist" aria-label="Tab system label">
    <button class="nj-tab__item" id="tab-item-1" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-content-1">Item 1</button>
    <button class="nj-tab__item nj-tab__item--active"  id="tab-item-2" role="tab" aria-selected="true" tabindex="0" aria-controls="tab-content-2">Item 2</button>
    <button class="nj-tab__item"  id="tab-item-3" role="tab" aria-selected="false" tabindex="-1"  aria-controls="tab-content-3" disabled>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>
  </div>
  <div style="padding-top: var(--nj-semantic-size-spacing-16);">
    <div class="nj-tab__content" id="tab-content-1" role="tabpanel" tabindex="0" aria-labelledby="tab-item-1">
      <p>My Item 1 content</p>
    </div>
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-2" role="tabpanel" tabindex="0" aria-labelledby="tab-item-2">
      <p>My Item 2 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-3" role="tabpanel" tabindex="0" aria-labelledby="tab-item-3">
      <p>My Item 3 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-4" role="tabpanel" tabindex="0" aria-labelledby="tab-item-4">
      <p>My Item 4 content</p>
    </div>
  </div>
</div>

Compact

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

<div class="nj-tab nj-tab--compact">
  <div class="nj-tab__items" role="tablist" aria-label="Tab system label">
    <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">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>
  </div>
  <div style="padding-top: var(--nj-semantic-size-spacing-16);">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" role="tabpanel" tabindex="0" aria-labelledby="tab-item-1">
      <p>My Item 1 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-2" role="tabpanel" tabindex="0" aria-labelledby="tab-item-2">
      <p>My Item 2 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-3" role="tabpanel" tabindex="0" aria-labelledby="tab-item-3">
      <p>My Item 3 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-4" role="tabpanel" tabindex="0" aria-labelledby="tab-item-4">
      <p>My Item 4 content</p>
    </div>
  </div>
</div>

Spacious

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

<div class="nj-tab nj-tab--spacious">
  <div class="nj-tab__items" role="tablist" aria-label="Tab system label">
    <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" disabled>Item 4</button>
  </div>
  <div style="padding-top: var(--nj-semantic-size-spacing-16);">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" role="tabpanel" tabindex="0" aria-labelledby="tab-item-1">
      <p>My Item 1 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-2" role="tabpanel" tabindex="0" aria-labelledby="tab-item-2">
      <p>My Item 2 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-3" role="tabpanel" tabindex="0" aria-labelledby="tab-item-3">
      <p>My Item 3 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-4" role="tabpanel" tabindex="0" aria-labelledby="tab-item-4">
      <p>My Item 4 content</p>
    </div>
  </div>
</div>

Stretched

My Item 1 content

My Item 2 content

My Item 3 content

My Item 4 content

<div class="nj-tab nj-tab--stretched">
  <div class="nj-tab__items" role="tablist" aria-label="Tab system label">
    <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>
  </div>
  <div style="padding-top: var(--nj-semantic-size-spacing-16);">
    <div class="nj-tab__content nj-tab__content--active" id="tab-content-1" role="tabpanel" tabindex="0" aria-labelledby="tab-item-1">
      <p>My Item 1 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-2" role="tabpanel" tabindex="0" aria-labelledby="tab-item-2">
      <p>My Item 2 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-3" role="tabpanel" tabindex="0" aria-labelledby="tab-item-3">
      <p>My Item 3 content</p>
    </div>
    <div class="nj-tab__content" id="tab-content-4" role="tabpanel" tabindex="0" aria-labelledby="tab-item-4">
      <p>My Item 4 content</p>
    </div>
  </div>
</div>