Syncfusion React Tabs

Implementing Tabs in Syncfusion React

The Tab component organizes related content into tabbed sections with headers, allowing users to switch between views. This comprehensive skill guides you through setup, customization, content rendering strategies, API methods, events, accessibility, animations, persistence, and advanced features like drag-and-drop reordering.

Table of Contents

• When to Use This Skill
• Component Overview
• Documentation and Navigation Guide
• Quick Start Example
• Common Patterns
• Key Properties Overview
• Methods & API Reference
• Events & Event Arguments
• Animation & Advanced Settings
• Related Skills

When to Use This Skill

• Creating tabbed interfaces with header-based navigation
• Organizing content into logical sections or views
• Building responsive layouts with scrollable or popup overflow handling
• Customizing header styling and icon positioning
• Managing content rendering performance (lazy loading, dynamic, or initial render)
• Implementing drag-and-drop tab reordering for user customization
• Adding localization support for international applications
• Ensuring accessibility compliance (WCAG, ARIA, keyboard navigation)
• Styling tabs with custom CSS or theme customization
• Programmatically managing tabs (add, remove, select, hide/show)
• Handling tab-related events (selection, drag-drop, add, remove)
• Preserving user preferences with state persistence
• Implementing smooth animations and transitions

Component Overview

The Tab component is a navigation control that displays content organized into tabs. Each tab has a header and associated content. Tabs support:

• Multiple header positions (top, bottom, left, right)
• Overflow handling (scrollable navigation or popup mode)
• Flexible content rendering (on-demand, dynamic, or initial load)
• Drag-and-drop reordering for interactive tab management
• Full accessibility with ARIA attributes and keyboard navigation
• Extensive customization via CSS and theme options
• Internationalization through localization APIs
• Animation effects for content transitions
• State persistence across page reloads
• HTML sanitization for security

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package dependencies and installation
• Vite and Create React App setup
• CSS imports and theme configuration
• Basic tab initialization with JSON items
• Minimal working example and running the app

When to read: Start here to set up a basic Tab component in your React application.

Header Styling & Customization

📄 Read: references/header-styling.md

• Built-in header style classes (e-fill, e-background, e-accent)
• Icon positioning options (left, right, top, bottom)
• Icon and header customization with CSS classes
• Code examples for styled headers
• Styling content and hover states

When to read: Use this when you need to customize tab header appearance, add icons, or apply predefined styles.

Orientation & Overflow Modes

📄 Read: references/orientation-overflow.md

• Header placement positions (top, bottom, left, right)
• Scrollable mode with navigation arrows
• Popup mode with dropdown display
• Touch and swipe support
• Width constraints and responsive behavior

When to read: Use this when you need to control header position, handle many tabs with overflow, or build responsive layouts.

Content Rendering Strategies

📄 Read: references/content-rendering.md

• On-demand rendering (lazy loading, default mode)
• Dynamic rendering for state-isolated tabs
• Initial rendering for state preservation
• Performance vs. state considerations
• Choosing the right rendering mode

When to read: Use this to optimize tab content performance or preserve user interactions across tab switches.

Drag and Drop Reordering

📄 Read: references/drag-drop-reordering.md

• Enabling drag-and-drop with allowDragAndDrop
• Handling drag events (onDragStart, dragging, dragged)
• Preventing drag/drop for specific items
• Tab-to-tab drag and drop
• Dragging tabs to external sources (TreeView)
• Drag area constraints

When to read: Use this to allow users to reorder tabs or integrate tab dragging with other components.

Accessibility & Localization

📄 Read: references/accessibility-localization.md

• WCAG 2.2 and Section 508 compliance
• ARIA attributes and roles for tabs
• Keyboard navigation (arrows, Home, End, Enter, Escape)
• Screen reader support
• Localization with L10n class
• Right-to-left (RTL) language support

When to read: Use this when building accessible applications or supporting multiple languages.

Quick Start Example

Here's a minimal Tab component setup:

import React from 'react';
import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
import '@syncfusion/ej2-react-navigations/styles/tailwind3.css';

export default function TabExample() {
  const tabItems = [
    {
      header: { text: 'Home' },
      content: 'Welcome to the home tab'
    },
    {
      header: { text: 'Profile' },
      content: 'User profile information'
    },
    {
      header: { text: 'Settings' },
      content: 'Application settings'
    }
  ];

  return (
    <TabComponent>
      <TabItemsDirective>
        {tabItems.map((item, index) => (
          <TabItemDirective key={index} header={item.header} content={item.content} />
        ))}
      </TabItemsDirective>
    </TabComponent>
  );
}

Common Patterns

Pattern 1: Styled Tabs with Icons

<TabComponent className="e-fill">
  <TabItemsDirective>
    <TabItemDirective 
      header={{ text: 'Home', iconCss: 'e-icons e-home' }} 
      content="Home content" 
    />
    <TabItemDirective 
      header={{ text: 'Profile', iconCss: 'e-icons e-user' }} 
      content="Profile content" 
    />
  </TabItemsDirective>
</TabComponent>

Pattern 2: Vertical Tabs on the Left

<TabComponent headerPlacement="Left">
  <TabItemsDirective>
    <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />
    <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />
  </TabItemsDirective>
</TabComponent>

Pattern 3: Lazy-Loaded Content (Default)

<TabComponent>
  <TabItemsDirective>
    <TabItemDirective 
      header={{ text: 'Lazy Tab' }} 
      content={() => <ExpensiveComponent />} 
    />
  </TabItemsDirective>
</TabComponent>

Pattern 4: Draggable Tabs

<TabComponent allowDragAndDrop={true}>
  <TabItemsDirective>
    <TabItemDirective header={{ text: 'Tab 1' }} content="Content 1" />
    <TabItemDirective header={{ text: 'Tab 2' }} content="Content 2" />
  </TabItemsDirective>
</TabComponent>

Key Properties Overview