TabMenu

The TabMenu component provides a flexible, customizable tab navigation system with horizontal and vertical layouts. It allows users to define tab items with labels, icons, and customizable actions. This component is useful for switching between different views or sections of content

Props

• type (string, required): Determines the orientation of the tab menu. Can be either:
  • 'horizontal': Horizontal tab layout.
  • 'vertical': Vertical tab layout.
• className (string, optional): Additional custom class for the tab menu wrapper.
• children (ReactNode, required): TabMenuItem components that define the tabs.
• border (boolean, optional): Adds a border around the vertical tab menu when set to true.

Example Usage

import React, { useState } from 'react';
import TabMenu from './TabMenu';

function App() {
  const [activeTab, setActiveTab] = useState('tab-one');

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div>
      <h6>Horizontal Tab Menu</h6>
      <TabMenu type="horizontal">
        <TabMenu.Item
          leftIcon="microsoft"
          rightIcon="arrow-right-s"
          label="Tab One"
          active={activeTab === 'tab-one'}
          onClick={() => handleTabClick('tab-one')}
        />
        <TabMenu.Item
          leftIcon="microsoft"
          rightIcon="arrow-right-s"
          label="Tab Two"
          active={activeTab === 'tab-two'}
          onClick={() => handleTabClick('tab-two')}
        />
        <TabMenu.Item
          leftIcon="microsoft"
          rightIcon="arrow-right-s"
          label="Tab Three"
          active={activeTab === 'tab-three'}
          onClick={() => handleTabClick('tab-three')}
        />
      </TabMenu>

      <h6 className="mt-4">Vertical Tab Menu</h6>
      <div style={{ width: '250px' }}>
        <TabMenu type="vertical">
          <TabMenu.Item
            leftIcon="microsoft"
            rightIcon="arrow-right-s"
            label="Tab One"
            active={activeTab === 'tab-one'}
            onClick={() => handleTabClick('tab-one')}
          />
          <TabMenu.Item
            leftIcon="microsoft"
            rightIcon="arrow-right-s"
            label="Tab Two"
            active={activeTab === 'tab-two'}
            onClick={() => handleTabClick('tab-two')}
          />
          <TabMenu.Item
            leftIcon="microsoft"
            rightIcon="arrow-right-s"
            label="Tab Three"
            active={activeTab === 'tab-three'}
            onClick={() => handleTabClick('tab-three')}
          />
        </TabMenu>
      </div>
    </div>
  );
}

export default App;

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	3
frontend-app-dashboard	1
frontend-app-course-authoring	1
frontend-app-discussions	1
frontend-app-account	1
frontend-app-profile	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/platform-settings/customization/index.jsx
• src/pages/platform-settings/index.jsx
• src/pages/program-single/ProgramSingle.jsx

frontend-app-dashboard

• src/pages/learning/index.jsx

frontend-app-course-authoring

• src/layouts/SettingsLayout.jsx

frontend-app-discussions

• src/discussions/navigation/navigation-bar/NavigationBar.jsx

frontend-app-account

• src/BlendxSettings/index.jsx

frontend-app-profile

• src/BlendxProfile/tabs/index.jsx