Skip to main content

Tabs

Tabs in Storybook

Examples​

Basic tabs​

The TabSet and Tab components are available from the @jutro/components package. The Tab component can only be placed inside a TabSet component. Tab requires to have an id set.

import React from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const BasicTabs = () => {
  return (
    <TabSet activeTab="tab-1">
      <Tab
        heading="Tab heading 1"
        id="tab-1"
      >
        Tab 1 content
      </Tab>
      <Tab
        heading="Tab heading 2"
        id="tab-2"
      >
        Tab 2 content
      </Tab>
      <Tab
        heading="Tab heading 3"
        id="tab-3"
      >
        Tab 3 content
      </Tab>
      <Tab
        heading="Tab heading 4"
        id="tab-4"
      >
        Tab 4 content
      </Tab>
    </TabSet>
  );
};

Tabs status examples​

You can make a tab visible or not using the visible prop. In this example, the third tab is not visible, but when you click on the first tab, the onTabChange prop calls the function handleTabChange and makes the third tab visible.

Additionally, the second tab is disabled using the disabled prop.

import React, { useState } from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const StatusTabs = () => {
  const [isTab3Visible, setIsTab3Visible] = useState(false);
  const [activeTab, setActiveTab] = useState('tab-4');
  const handleTabChange = (tabId) => {
    setActiveTab(tabId);
    setIsTab3Visible(tabId === 'tab-1' || tabId === 'tab-3');
  };

  return (
    <TabSet
      defaultActiveTab="tab-4"
      activeTab={activeTab}
      onTabChange={handleTabChange}
    >
      <Tab
        heading="Tab heading 1"
        id="tab-1"
      >
        Tab 1 content
      </Tab>
      <Tab
        heading="Disabled tab"
        id="tab-2"
        disabled
      >
        Tab 2 content
      </Tab>
      <Tab
        heading="Hidden tab"
        id="tab-3"
        visible={isTab3Visible}
      >
        This tab is only visible after clicking on the fist tab.
      </Tab>
      <Tab
        heading="Tab heading 4"
        id="tab-4"
      >
        Click on the first tab to enable the hidden tab.
      </Tab>
    </TabSet>
  );
};

Nested tabs and overflow​

You can include a TabSet component inside a Tab to nest a new set of tabs.

When the width of the tabs is greater that the container, the tabs overflow automatically.

import React from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const NestedOverflowTabs = () => {
  return (
    <div style={{ width: '600px' }}>
      <TabSet activeTab="tab-1">
        <Tab
          heading="Tab heading 1"
          id="tab-1"
        >
          <p>Here are some nested tabs:</p>
          <TabSet activeTab="ntab-1">
            <Tab
              heading="Nested Tab heading 1"
              id="ntab-1"
            >
              Nested Tab 1 content
            </Tab>
            <Tab
              heading="Nested Tab heading 2"
              id="ntab-2"
            >
              Nested Tab 2 content
            </Tab>
          </TabSet>
        </Tab>
        <Tab
          heading="Tab heading 2"
          id="tab-2"
        >
          Tab 2 content
        </Tab>
        <Tab
          heading="Tab heading 3"
          id="tab-3"
        >
          Tab 3 content
        </Tab>
        <Tab
          heading="Tab heading 4"
          id="tab-4"
        >
          Tab 4 content
        </Tab>
        <Tab
          heading="Tab heading 5"
          id="tab-5"
        >
          Tab 5 content
        </Tab>
        <Tab
          heading="Tab heading 6"
          id="tab-6"
        >
          Tab 6 content
        </Tab>
        <Tab
          heading="Tab heading 7"
          id="tab-7"
        >
          Tab 7 content
        </Tab>
      </TabSet>
    </div>
  );
};