Tabs Component

Live Demo

Basic Tabs

Welcome Home

This is your home dashboard where you can see an overview of your activity.

Quick access to recent items
Activity summary
Important notifications

User Profile

Manage your personal information and preferences here.

Name: John Doe

Email: john.doe@example.com

Role: Administrator

Settings

Configure your application settings and preferences.

Enable notifications Dark mode Auto-save

Vertical Tabs

General Settings

Configure general application settings.

Security Settings

Manage your security preferences and authentication methods.

Privacy Settings

Control your privacy settings and data sharing options.

Notification Preferences

Choose how and when you want to receive notifications.

Custom Style Tabs

Use data-style="custom" to disable default CSS and apply your own styles.

Step 1: Create Account

Enter your email and password to create an account.

Step 2: Complete Profile

Tell us a bit about yourself.

Full Name

Step 3: Confirmation

Review your information and confirm.

Key Features

Auto-initialization

Simply add data-component="tabs" and the component automatically initializes with all features.

Full Accessibility

Complete ARIA attributes for screen readers and keyboard navigation support.

Keyboard Navigation

Navigate tabs using Arrow keys, Home, and End keys for better accessibility.

Configurable

Configure behavior through data attributes or JavaScript API with event callbacks.

Dynamic Management

Add, remove, or update tabs dynamically with automatic re-initialization.

Orientations

Support both horizontal and vertical tab layouts for different use cases.

Source Code


                  <!-- Basic Tabs Example -->
                  <div data-component="tabs" data-default-tab="profile">
                  <div class="tab-buttons" role="tablist">
                  <button class="tab-button" data-tab="home" role="tab">
                  <span class="icon-home">Home</span>
                  </button>
                  <button class="tab-button" data-tab="profile" role="tab">
                  <span class="icon-user">Profile</span>
                  </button>
                  <button class="tab-button" data-tab="settings" role="tab">
                  <span class="icon-cog">Settings</span>
                  </button>
                  </div>
                  <div class="tab-content">
                  <div class="tab-pane" data-tab="home" role="tabpanel">
                  ....
                  </div>
                  <div class="tab-pane" data-tab="profile" role="tabpanel">
                  ....
                  </div>
                  <div class="tab-pane" data-tab="settings" role="tabpanel">
                  ....
                  </div>
                  </div>
                  </div>


                  <!-- Vertical Tabs Example -->
                  <div data-component="tabs" data-orientation="vertical" class="vertical-tabs-demo">
                  <div class="tab-buttons vertical" role="tablist">
                  <button class="tab-button" data-tab="general" role="tab">General</button>
                  <button class="tab-button" data-tab="security" role="tab">Security</button>
                  <button class="tab-button" data-tab="privacy" role="tab">Privacy</button>
                  <button class="tab-button" data-tab="notifications" role="tab">Notifications</button>
                  </div>
                  <div class="tab-content">
                  <div class="tab-pane" data-tab="general" role="tabpanel">
                  ....
                  </div>
                  <div class="tab-pane" data-tab="security" role="tabpanel">
                  ....
                  </div>
                  <div class="tab-pane" data-tab="privacy" role="tabpanel">
                  ....
                  </div>
                  <div class="tab-pane" data-tab="notifications" role="tabpanel">
                  ....
                  </div>
                  </div>
                  </div>

// Initialize tabs programmatically
                  const element = document.querySelector('#my-tabs');

                  const tabs = TabsComponent.create(element, {
                  defaultTab: 'profile',
                  keyboard: true,
                  animation: true,
                  animationDuration: 300,

                  // Event callbacks
                  onInit() {
                  console.log('Tabs initialized!');
                  },

                  beforeTabChange(tabId, previousTab) {
                  console.log(`Changing from ${previousTab} to ${tabId}`);
                  // Return false to cancel the change
                  if (tabId === 'restricted') {
                  alert('This tab is restricted!');
                  return false;
                  }
                  return true;
                  },

                  onTabChange(tabId, previousTab) {
                  console.log(`Tab changed to: ${tabId}`);
                  // Update URL
                  window.history.pushState({}, '', `#${tabId}`);
                  },

                  onDestroy() {
                  console.log('Tabs destroyed!');
                  }
                  });

                  // Use the instance
                  tabs.switchTab('settings');
                  const activeTab = tabs.getActiveTab();
                  console.log('Current tab:', activeTab);

                  // Refresh after adding new tabs
                  tabs.refresh();

                  // Get instance from element
                  const instance = TabsComponent.getInstance(element);
                  if (instance) {
                  instance.switchTab('home');
                  }

// Listen to tab change events
                  const tabsElement = document.querySelector('[data-component="tabs"]');

                  tabsElement.addEventListener('tabs:tabchange', (event) => {
                  const { tabId, previousTab, button, panel } = event.detail;

                  console.log('Tab changed!');
                  console.log('Previous:', previousTab);
                  console.log('Current:', tabId);
                  console.log('Button:', button);
                  console.log('Panel:', panel);

                  // Load content dynamically
                  if (tabId === 'dynamic' && !panel.dataset.loaded) {
                  fetch(`/api/content/${tabId}`)
                  .then(response => response.text())
                  .then(html => {
                  panel.innerHTML = html;
                  panel.dataset.loaded = 'true';
                  });
                  }

                  // Track analytics
                  if (window.gtag) {
                  gtag('event', 'tab_view', {
                  tab_name: tabId
                  });
                  }
                  });

                  // Handle browser back/forward
                  window.addEventListener('popstate', () => {
                  const tabId = window.location.hash.slice(1) || 'home';
                  const tabs = TabsComponent.getInstance(tabsElement);
                  if (tabs) {
                  tabs.switchTab(tabId);
                  }
                  });

How It Works

1. Automatic Initialization

TabsComponent scans for elements with data-component="tabs" and automatically initializes them with all features enabled.

2. ARIA Accessibility

The component automatically adds proper ARIA attributes including role="tab", role="tabpanel", aria-selected, and aria-controls for screen reader support.

3. Keyboard Navigation

Users can navigate tabs using Arrow keys (left/right or up/down depending on orientation), Home to jump to the first tab, and End to jump to the last tab.

4. Data Attributes

Configure tabs using HTML data attributes like data-default-tab, data-orientation, and data-keyboard without writing JavaScript.

5. Event System

Listen to tabs:tabchange events or use callback options like onTabChange and beforeTabChange to react to tab changes.

6. Dynamic Updates

Add or remove tabs dynamically and call refresh() to update the component. The MutationObserver automatically detects new tabs added to the DOM.

Configuration Options

Option	Type	Default	Description
`defaultTab`	string	null	ID of the default active tab (null = first tab)
`keyboard`	boolean	true	Enable keyboard navigation
`animation`	boolean	true	Enable transition animations
`animationDuration`	number	300	Animation duration in milliseconds
`orientation`	string	'horizontal'	Tab orientation: 'horizontal' or 'vertical'
`ariaLabel`	string	'Tabs'	ARIA label for the tablist
`lazy`	boolean	false	Lazy load tab content
`debug`	boolean	false	Enable debug logging
`data-style`	string	-	When set (e.g., "custom", "wizard"), disables default CSS. Leave empty or use "default" for framework styles.