Implement and customize Tab components in Syncfusion React applications. Use this skill whenever the user needs to create tabbed interfaces, manage tab content rendering, configure header positioning, enable drag-and-drop reordering, or customize tab styling. Essential for building navigation layout

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]( when to use this skill) [Component Overview]( component overview) [Documentation and Navigation Guide]( documentation and navigation guide) [Quick Start Example]( quick start example) [Common Patterns]( common patterns) [Key Properties Overview]( key properties overview) [Methods & API Reference]( methods api reference) [Events & Event Arguments]( events event arguments) [Animation & Advanced Settings]( animation advanced settings) [Related Skills]( 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](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](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](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](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](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](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: Common Patterns Pattern 1: Styled Tabs with Icons Pattern 2: Vertical Tabs on the Left Pattern 3: Lazy Loaded Content (Default) Pattern 4: Draggable Tabs Key Properties Overview Property Type Default Purpose headerPlacement String 'Top' Position of tab headers: Top , Bottom , Left , Right overflowMode String 'Scrollable' Overflow handling: Scrollable or Popup loadOn String 'Demand' Content rendering: Demand , Dynamic , or Init allowDragAndDrop Boolean false Enable tab reordering via drag and drop showCloseButton Boolean false Display close button on tab headers locale String 'en US' Localization culture code (e.g., 'fr FR' ) width String/Number '100%' Tab container width height String/Number 'auto' Tab container height heightAdjustMode String 'Content' Height adjustment mode: None , Auto , Content , Fill selectedItem Number 0 Index of the active tab enablePersistence Boolean false Persist selected tab state across reloads enableHtmlSanitizer Boolean true Sanitize HTML content for security cssClass String '' Custom CSS classes to apply to component enableRtl Boolean false Enable right to left layout scrollStep Number null Distance to scroll when using scroll arrows reorderActiveTab Boolean true Reorder to show active tab in header area clearTemplates Boolean true Clear templates when items change dynamically dragArea String null Restrict drag area for tab reordering swipeMode String 'Both' Swipe detection: Both , Touch , Mouse , None animation TabAnimationSettingsModel Default Animation settings for tab transitions Methods & API Reference addTab(items, index) Adds new items to the Tab component. The items are inserted at the specified index. Parameters: items Array of TabItemModel objects to add index (optional) Position where items should be inserted. Default is 0. Returns: void Example: removeTab(index) Removes a tab item at the specified index. Parameters: index The index of the tab to remove Returns: void Example: select(args, event) Selects a tab by index or DOM element. Programmatically switches to a different tab. Parameters: args Index (number) or HTMLElement of the tab to select event (optional) DOM event object Returns: void Example: enableTab(index, value) Enables or disables a specific tab item. Disabled tabs cannot be selected but remain visible. Parameters: index Index of the tab to enable/disable value Boolean. true to enable, false to disable Returns: void Example: hideTab(index, value) Shows or hides a tab item at the specified index. Hidden tabs are removed from the DOM. Parameters: index Index of the tab to show/hide value (optional) Boolean. true to hide, false to show. Default is true Returns: void Example: getItemIndex(tabItemId) Gets the index of a tab item by its ID. Parameters: tabItemId The ID of the tab item Returns: number The index of the tab, or 1 if not found Example: refresh() Refreshes the entire Tab component. Useful after dynamically changing items or properties. Parameters: None Returns: void Example: refreshActiveTab() Refreshes only the content of the currently active tab. Does not reload other tabs. Parameters: None Returns: void Example: refreshActiveTabBorder() Refreshes the active tab's visual indicator (underline/border). Useful after styling changes. Parameters: None Returns: void Example: refreshOverflow() Reorganizes and adjusts the Tab headers to fit the available width without re rendering the entire component. Useful for responsive layouts. Parameters: None Returns: void Example: disable(value) Disables or enables the entire Tab component. Parameters: value Boolean. true to disable, false to enable Returns: void Example: destroy() Removes the component from the DOM and detaches all event handlers, attributes, and classes. Parameters: None Returns: void Example: Events & Event Arguments The Tab component provides comprehensive event support for handling user interactions and component state changes. selected Fired after a tab item is selected. Used to execute actions when the user switches to a different tab. Event Arguments: SelectEventArgs SelectEventArgs Properties: selectedIndex (number) Index of the newly selected tab selectedItem (HTMLElement) DOM element of the selected tab selectedContent (HTMLElement) Content area of the selected tab previousIndex (number) Index of the previously selected tab previousItem (HTMLElement) DOM element of the previous tab isInteracted (boolean) Whether selection was triggered by user interaction (true) or programmatically (false) isSwiped (boolean) Whether selection was triggered by swipe gesture preventFocus (boolean) Set to true to prevent focus on selected tab cancel (boolean) Set to true to prevent the selection Example: selecting Fired before a tab item is selected. Use this to prevent selection under certain conditions. Event Arguments: SelectingEventArgs (same properties as SelectEventArgs ) Example: added Fired after a new tab item is added to the component. Event Arguments: AddEventArgs AddEventArgs Properties: addedItems (TabItemModel[]) Array of added tab items name (string) Name of the event cancel (boolean) Set to true to prevent the action Example: adding Fired before a new tab item is added. Use this to validate or modify items before addition. Event Arguments: AddEventArgs Example: removed Fired after a tab item is removed from the component. Event Arguments: RemoveEventArgs RemoveEventArgs Properties: removedItem (HTMLElement) DOM element of the removed tab index (number) Index of the removed tab name (string) Name of the event Example: removing Fired before a tab item is removed. Use this to prevent removal under certain conditions. Event Arguments: RemoveEventArgs Example: onDragStart Fired before dragging a tab item. Use this to prevent dragging specific tabs or customize drag behavior. Event Arguments: DragEventArgs DragEventArgs Properties: draggedItem (HTMLElement) The tab being dragged clonedElement

syncfusion-react-tabs