Tab

Tabs organise content across different screens with a simple navigation.

Sketch Figma HTML, CSS Available from
check check
check
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://assets.design.digital.engie.com/fluid/latest/reboot.css">
<link rel="stylesheet" type="text/css" href="https://assets.design.digital.engie.com/fluid/latest/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://assets.design.digital.engie.com/fluid/latest/components/tab/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  Tab.init();
});
</script>
import Tab from '@engie-group/fluid-design-system/lib/components/tab';
document.addEventListener('DOMContentLoaded', function(event) {
  Tab.init();
});
//Initialization via webcomponents
   
import React, { useEffect } from 'react';
import { TabWC } from '@engie-group/fluid-design-system/lib-esm/components/tab';
   
const App = () => {
  ...
  useEffect(() => {
    TabWC.init();
  }, []);
     ...
}
   
export default App;
   
   <nj-tab>
       <div class="nj-tab"  role="tablist">
          ...
       </div>
   </nj-tab>
   

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