Tab

Tabs organise content across different screens with a simple navigation.

Sketch	Figma	HTML, CSS	Available from
		JS	v4.1.0

Example

My Item 1 content

My Item 2 content

My Item 3 content

<div class="nj-tab"  role="tablist">
   <div class="nj-tab__items">
      <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="my-3">
      <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>

Usage

Choose between using the global library or initializing component:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/reboot.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/components/tab/index.css">

@import "~@engie-group/fluid-design-system/src/reboot";  
@import "~@engie-group/fluid-design-system/src/components/tab";

//Exposed global variable

<script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/components/tab/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@latest/lib/auto-init.js"></script>

import { Tab } from '@engie-group/fluid-design-system/lib/components/tab';
import '@engie-group/fluid-design-system/lib/auto-init';

import React from 'react';
import { Tab } from '@engie-group/fluid-design-system/lib/components/tab';
import '@engie-group/fluid-design-system/lib/auto-init'; //import once in your main file app
   
const App = () => {
  ...
 
  return (
  <div class="nj-tab"  role="tablist">
     <div class="nj-tab__items">
        <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="my-3">
        <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>
  )
}
   
export default App;

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`

Design Tokens

CSS4 local variable	light value	dark value
`--nj-color-line-tab`	–nj-color-base-gray-300	–nj-color-base-gray-400