Tabs

<bh-tabs> | BharatTabs

Tabs component provides a way to organize content into multiple sections that can be displayed one at a time.

Open in

Home

Profile

Settings

Help

Welcome to the Home tab content!

This is your Profile information.

Adjust your application Settings here.

Need Help? Contact support.

Basic Usage

Preview

Open in

Home

Profile

Settings

Help

Welcome to the Home tab content!

This is your Profile information.

Adjust your application Settings here.

Need Help? Contact support.

HTML

<bh-tabs id="basic-tabs">
  <div style="margin-top: 14px;"></div>
  <div slot="tab">Home</div>
  <div slot="tab">Profile</div>
  <div slot="tab">Settings</div>
  <div slot="tab">Help</div>

  <div slot="panel-0" class="panel-content">
    <div>Welcome to the Home tab content!</div>
  </div>
  <div slot="panel-1" class="panel-content">
    <div>This is your Profile information.</div>
  </div>
  <div slot="panel-2" class="panel-content">
    <div>Adjust your application Settings here.</div>
  </div>
  <div slot="panel-3" class="panel-content">
    <div>Need Help? Contact support.</div>
  </div>
</bh-tabs>

React

import React from 'react';
import { BharatTabs } from 'bharat-ui/react/components/tabs';

function App() {
  return (
    <BharatTabs id="basic-tabs">
      <div style="margin-top: 14px;"></div>
      <div slot="tab">Home</div>
      <div slot="tab">Profile</div>
      <div slot="tab">Settings</div>
      <div slot="tab">Help</div>

      <div slot="panel-0" className="panel-content">
        <div>Welcome to the Home tab content!</div>
      </div>
      <div slot="panel-1" className="panel-content">
        <div>This is your Profile information.</div>
      </div>
      <div slot="panel-2" className="panel-content">
        <div>Adjust your application Settings here.</div>
      </div>
      <div slot="panel-3" className="panel-content">
        <div>Need Help? Contact support.</div>
      </div>
    </BharatTabs>
  );
}

export default App;

Variants

Use the variant attribute to set different tab styles.

Preview

Open in

Default

Tab 1

Content for Tab 1

Tab 2

Content for Tab 2

Pills

Tab 1

Content for Tab 1

Tab 2

Content for Tab 2

HTML

<!-- Default -->
<bh-tabs variant="default">
  <div slot="tab">Tab 1</div>
  <div slot="panel-0">Content for Tab 1</div>
  <div slot="tab">Tab 2</div>
  <div slot="panel-1">Content for Tab 2</div>
</bh-tabs>

<!-- Pills -->
<bh-tabs variant="pills">
  <div slot="tab">Tab 1</div>
  <div slot="panel-0">Content for Tab 1</div>
  <div slot="tab">Tab 2</div>
  <div slot="panel-1">Content for Tab 2</div>
</bh-tabs>

React

import React from 'react';
import { BharatTabs } from 'bharat-ui/react/components/tabs';

function App() {
  return (
    <>
      {/* Default */}
      <BharatTabs variant="default">
        <div className="tab" slot="tab">Tab 1</div>
        <div className="panel" slot="panel-0">Content for Tab 1</div>
        <div className="tab" slot="tab">Tab 2</div>
        <div className="panel" slot="panel-1">Content for Tab 2</div>
      </BharatTabs>

      {/* Pills */}
      <BharatTabs variant="pills">
        <div className="tab" slot="tab">Tab 1</div>
        <div className="panel" slot="panel-0">Content for Tab 1</div>
        <div className="tab" slot="tab">Tab 2</div>
        <div className="panel" slot="panel-1">Content for Tab 2</div>
      </BharatTabs>
    </>
  );
}

export default App;

Tab Positions

Control the position of the tab list using the tabListPosition property.

Preview

Open in

Bottom

Tab 1

Content for Tab 1

Tab 2

Content for Tab 2

Start

Tab 1

Tab 2

Content for Tab 1

Content for Tab 2

End

Tab 1

Content for Tab 1

Tab 2

Content for Tab 2

HTML

<!-- Bottom -->
<bh-tabs tabListPosition="bottom">
  <div slot="tab">Tab 1</div>
  <div slot="panel-0">Content for Tab 1</div>
  <div slot="tab">Tab 2</div>
  <div slot="panel-1">Content for Tab 2</div>
</bh-tabs>

<!-- Start -->
<bh-tabs tabListPosition="start">
  <div slot="tab">Tab 1</div>
  <div slot="panel-0">Content for Tab 1</div>
  <div slot="tab">Tab 2</div>
  <div slot="panel-1">Content for Tab 2</div>
</bh-tabs>

<!-- End -->
<bh-tabs tabListPosition="end">
  <div slot="tab">Tab 1</div>
  <div slot="panel-0">Content for Tab 1</div>
  <div slot="tab">Tab 2</div>
  <div slot="panel-1">Content for Tab 2</div>
</bh-tabs>

React

import React from 'react';
import { BharatTabs } from 'bharat-ui/react/components/tabs';

function App() {
  return (
    <>
      {/* Bottom */}
      <BharatTabs tabListPosition="bottom">
        <div className="tab" slot="tab">Tab 1</div>
        <div className="panel" slot="panel-0">Content for Tab 1</div>
        <div className="tab" slot="tab">Tab 2</div>
        <div className="panel" slot="panel-1">Content for Tab 2</div>
      </BharatTabs>

      {/* Start */}
      <BharatTabs tabListPosition="start">
        <div className="tab" slot="tab">Tab 1</div>
        <div className="panel" slot="panel-0">Content for Tab 1</div>
        <div className="tab" slot="tab">Tab 2</div>
        <div className="panel" slot="panel-1">Content for Tab 2</div>
      </BharatTabs>

      {/* End */}
      <BharatTabs tabListPosition="end">
        <div className="tab" slot="tab">Tab 1</div>
        <div className="panel" slot="panel-0">Content for Tab 1</div>
        <div className="tab" slot="tab">Tab 2</div>
        <div className="panel" slot="panel-1">Content for Tab 2</div>
      </BharatTabs>
    </>
  );
}

export default App;

Contained

Control the size of tabs using the size property.

Preview

Open in

Features

Examples

Documentation

Key Features

• Multiple tab styles (underline, pills, contained)
• Responsive design
• Vertical and horizontal layouts
• Customizable with CSS variables
• Fully accessible
• Animation support

Usage Examples

The Bharat UI Tab Switcher can be used in a variety of contexts:

• Navigation menus
• Content organization
• Form steps
• Dashboard sections
• Product details/specifications

Documentation

Refer to our documentation for complete usage guidelines:

 bsdfhbdjbvkjsbdv.kjbsfdkjv

HTML

<bh-tabs variant="contained">
  <div slot="tab" >Features</div>
  <div slot="tab">
    Examples
  </div>
  <div slot="tab">Documentation</div>

  <div slot="panel-0" class="panel-content block-style" style="display: block; padding: 20px;">
    <h3>Key Features</h3>
    <ul>
      <li>Multiple tab styles (underline, pills, contained)</li>
      <li>Responsive design</li>
      <li>Vertical and horizontal layouts</li>
      <li>Customizable with CSS variables</li>
      <li>Fully accessible</li>
      <li>Animation support</li>
    </ul>
  </div>
  <div slot="panel-1" class="panel-content block-style" style="display: block; padding: 20px;">
    <h3>Usage Examples</h3>
    <p>The Bharat UI Tab Switcher can be used in a variety of contexts:</p>
    <ul>
      <li>Navigation menus</li>
      <li>Content organization</li>
      <li>Form steps</li>
      <li>Dashboard sections</li>
      <li>Product details/specifications</li>
    </ul>
  </div>
  <div slot="panel-2" class="panel-content block-style" style="display: block; padding: 20px;">
    <h3>Documentation</h3>
    <p>Refer to our documentation for complete usage guidelines:</p>
    <div class="code-sample">
      <pre><code> bsdfhbdjbvkjsbdv.kjbsfdkjv</code></pre>
    </div>
  </div>
</bh-tabs>

React

import React from 'react';
import { BharatTabs } from 'bharat-ui/react/components/tabs';

function App() {
  return (
    <>
      <BharatTabs variant="contained">
      <div slot="tab">Features</div>
      <div slot="tab">Examples</div>
      <div slot="tab">Documentation</div>
        <div slot="panel-0" className="panel-content block-style" style="display: block; padding: 20px;">
          <h3>Key Features</h3>
          <ul>
            <li>Multiple tab styles (underline, pills, contained)</li>
            <li>Responsive design</li>
            <li>Vertical and horizontal layouts</li>
            <li>Customizable with CSS variables</li>
            <li>Fully accessible</li>
            <li>Animation support</li>
          </ul>
        </div>
        <div slot="panel-1" className="panel-content block-style" style="display: block; padding: 20px;">
          <h3>Usage Examples</h3>
          <p>The Bharat UI Tab Switcher can be used in a variety of contexts:</p>
          <ul>
            <li>Navigation menus</li>
            <li>Content organization</li>
            <li>Form steps</li>
            <li>Dashboard sections</li>
            <li>Product details/specifications</li>
          </ul>
        </div>
        <div slot="panel-2" className="panel-content block-style" style="display: block; padding: 20px;">
          <h3>Documentation</h3>
          <p>Refer to our documentation for complete usage guidelines:</p>
          <div className="code-sample">
            <pre><code> bsdfhbdjbvkjsbdv.kjbsfdkjv</code></pre>
          </div>
        </div>
      </BharatTabs>
    </>
  );
}

export default App;

Properties

Attribute / Property	Type	Description
variant	string	Changes the visual style of the tabs. Example values: "default", "pills", "contained".
alignment	string	Controls the alignment of the tabs. Options: "start", "center", "end", "stretch".
activeTab	number	The index of the currently active tab.
animated	boolean	Enables or disables animation during tab switching.
tabListPosition	string	Determines the position of the tab list. Values: "top", "bottom", "start", "end".
size	string	Optional size setting for styling. Options could be "small", "medium", "large".
tabs	array	Internally generated list of tabs parsed from the tab slot content. Not passed directly.

Named Slots

Slot Name	Description
tab	Each tab trigger should be slotted with this name. Use multiple elements inside this slot for each tab label/button.
panel-0	Content to show when the first tab (index 0) is active.
panel-1	Content to show when the second tab (index 1) is active.
panel-2	Content for the third tab, and so on. Ensure the slot name matches the tab index.