Skip to content

Pending Review

Pending Review from User Experience (UX)

Tabs Component

Overview

The PWC Tabs component provides a flexible navigation interface for organizing content into distinct sections with horizontal or vertical layouts. It enables users to switch between different views or categories while maintaining context within a single interface. The component supports scrollable tab bars, custom tags, disabled states, and responsive design patterns.

Core Capabilities

  • Horizontal and Vertical Layouts - Flexible orientation support with automatic scrolling when content overflows container boundaries
  • Slotted Content Management - Dynamic content rendering using named slots that correspond to individual tab sections
  • Interactive Navigation - Click-based tab switching with keyboard navigation support and focus management
  • Tag Integration - Built-in support for tag labels with various visual variants to indicate status or importance
  • Scrollable Tab Bar - Automatic scroll controls with smooth scrolling behavior for handling large numbers of tabs
  • State Management - Comprehensive selection state tracking with change event emission for external state synchronization

When to use Tabs:

  • Organize related content into logical sections that users need to switch between frequently
  • Create navigation interfaces for dashboards, settings panels, or multi-step workflows
  • Display different views of the same data set with consistent interaction patterns
  • Implement content categorization where only one section should be visible at a time

When not to use Tabs:

  • Navigation between completely different application areas or pages (use navigation components instead)
  • Content that should be viewed simultaneously or compared side-by-side
  • Single content sections that don't require organization or categorization

Basic Implementation

import React, { useState } from 'react';
import { PwcTabs } from "@progress-i360/pwc-react";

function TabsExample() {
  const [selectedTab, setSelectedTab] = useState('overview');

  const tabItems = [
    { label: 'Overview', name: 'overview' },
    { label: 'Details', name: 'details' },
    { label: 'Settings', name: 'settings' }
  ];

  return (
      <PwcTabs
        items={tabItems}
        selected={selectedTab}
        onTabChange={(e) => setSelectedTab(e.detail.newTab)}
      >
        <div slot="overview">
          <h3>Overview</h3>
          <p>Dashboard overview with key metrics.</p>
        </div>
        <div slot="details">
          <h3>Details</h3>
          <p>Detailed information and analytics.</p>
        </div>
        <div slot="settings">
          <h3>Settings</h3>
          <p>Configuration and preferences.</p>
        </div>
      </PwcTabs>
  );
}

import { useState } from 'react';
import '@progress-i360/progress-web-components/tabs';
import '@progress-i360/progress-web-components/button';

function VerticalTabs() {
  const [activeTab, setActiveTab] = useState('dashboard');

  const tabs = [
    { label: 'Dashboard', name: 'dashboard' },
    { label: 'Analytics', name: 'analytics', tagLabel: '5' },
    { label: 'Reports', name: 'reports' },
    { label: 'Settings', name: 'settings' }
  ];

  return (
    <div style={{ height: '300px' }}>
      <pwc-tabs
        items={tabs}
        selected={activeTab}
        direction="vertical"
        onPwcTabChange={(event) => setActiveTab(event.detail.newTab)}
      >
        <div slot="dashboard" style={{ padding: '16px' }}>
          <h3>Dashboard</h3>
          <p>Active Users: 1,234</p>
          <pwc-button label="View Details" variant="primary"></pwc-button>
        </div>

        <div slot="analytics" style={{ padding: '16px' }}>
          <h3>Analytics</h3>
          <p>5 reports available for review.</p>
        </div>

        <div slot="reports" style={{ padding: '16px' }}>
          <h3>Reports</h3>
          <pwc-button label="Generate Report" variant="outline"></pwc-button>
        </div>

        <div slot="settings" style={{ padding: '16px' }}>
          <h3>Settings</h3>
          <p>Configure your preferences.</p>
        </div>
      </pwc-tabs>
    </div>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/tabs";
import "@progress-i360/progress-web-components/flex";
import "@progress-i360/progress-web-components/heading";
import "@progress-i360/progress-web-components/body";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'tabs-demo',
  template: `
    <pwc-tabs [items]="tabItems" [selected]="selectedTab" (pwc-tab-change)="handleTabChange($event)">
      <pwc-flex slot="dashboard" direction="column" gap="m" padding="m">
        <pwc-heading content="Dashboard" size="l"></pwc-heading>
        <pwc-body content="Overview of system metrics and key performance indicators."></pwc-body>
      </pwc-flex>
      <pwc-flex slot="users" direction="column" gap="m" padding="m">
        <pwc-heading content="Users" size="l"></pwc-heading>
        <pwc-body [content]="'Managing ' + userCount + ' active users'"></pwc-body>
        <pwc-button label="Add User" variant="primary" (pwc-click)="addUser()"></pwc-button>
      </pwc-flex>
      <pwc-flex slot="settings" direction="column" gap="m" padding="m">
        <pwc-heading content="Settings" size="l"></pwc-heading>
        <pwc-body content="System configuration and preferences."></pwc-body>
      </pwc-flex>
    </pwc-tabs>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TabsDemo {
  selectedTab = 'dashboard';
  userCount = 42;

  tabItems = [
    { label: 'Dashboard', name: 'dashboard' },
    { label: 'Users', name: 'users', tagLabel: 'New' },
    { label: 'Settings', name: 'settings' }
  ];

  handleTabChange(e: Event) {
    const ce = (e as CustomEvent);
    this.selectedTab = ce.detail.newTab;
  }

  addUser() {
    this.userCount++;
  }
}

// Create tabs with content switching
const tabsContainer = document.createElement('pwc-tabs');
tabsContainer.setAttribute('selected', 'dashboard');

// Define tab items with labels and names
const tabItems = [
  { label: 'Dashboard', name: 'dashboard' },
  { label: 'Settings', name: 'settings', tagLabel: 'New' }
];
tabsContainer.items = tabItems;

// Create content for each tab using slots
const dashboardContent = document.createElement('div');
dashboardContent.setAttribute('slot', 'dashboard');
dashboardContent.textContent = 'Dashboard content with analytics and metrics';

const settingsContent = document.createElement('div');
settingsContent.setAttribute('slot', 'settings'); 
settingsContent.textContent = 'Settings content for configuration';

// Handle tab changes
tabsContainer.addEventListener('pwc-tab-change', (event) => {
  console.log('Tab changed from', event.detail.oldTab, 'to', event.detail.newTab);
});

// Append content and tabs
tabsContainer.appendChild(dashboardContent);
tabsContainer.appendChild(settingsContent);
document.body.appendChild(tabsContainer);

Usage Patterns

  • Content Organization - Use tabs to group related information into logical categories while maintaining a clean interface and reducing cognitive load
  • Dashboard Sections - Implement tabbed interfaces for different dashboard views like overview, analytics, reports, and settings with consistent navigation
  • Multi-Step Workflows - Create guided processes where users progress through different stages using tab navigation with state management
  • Responsive Navigation - Implement horizontal tabs on desktop and vertical tabs on mobile devices for optimal space utilization and touch interaction

Best Practices

Content Strategy Guidelines

  • Logical Grouping - Organize tabs based on user mental models and task flows rather than technical or organizational structure
  • Clear Labeling - Use concise, descriptive labels that clearly indicate the content or functionality within each tab section
  • Consistent Content Depth - Maintain similar levels of content complexity across tabs to create predictable user experiences
  • Progressive Disclosure - Use tags and indicators to communicate additional information about tab states without cluttering the interface

Performance Optimization

  • Lazy Content Loading - Implement content loading only when tabs are activated to reduce initial page load times and memory usage
  • Efficient Re-rendering - Use slot-based content management to minimize DOM manipulation and maintain component performance
  • Scroll Optimization - Enable smooth scrolling behaviors for tab bars while maintaining responsive interaction feedback
  • Event Management - Properly manage event listeners and cleanup to prevent memory leaks in single-page applications

Integration Architecture

  • State Synchronization - Coordinate tab selection state with application routing and URL parameters for deep linking support
  • Accessibility Integration - Implement proper ARIA attributes and keyboard navigation patterns for screen reader compatibility
  • Component Composition - Design tab content using composable components rather than monolithic structures for maintainability
  • Responsive Behavior - Implement adaptive layouts that switch between horizontal and vertical orientations based on viewport size

Common Use Cases

Dashboard Navigation

  • Create multi-section dashboards with overview, metrics, and detailed analysis tabs for comprehensive data exploration
  • Implement admin panels with user management, system settings, and monitoring tabs organized by functional area
  • Build analytics interfaces with real-time data, historical trends, and report generation tabs for different stakeholder needs

Content Management Interfaces

  • Design content editing workflows with draft, preview, and publish tabs for content creation and review processes
  • Create media management systems with upload, library, and settings tabs for efficient asset organization
  • Implement user profile sections with personal info, preferences, and activity history tabs for comprehensive account management

Application Settings Panels

  • Organize application preferences into categories like appearance, notifications, privacy, and account settings
  • Create configuration interfaces for complex systems with general, advanced, and integration settings tabs
  • Build onboarding flows with welcome, setup, tutorial, and completion tabs for guided user introduction

Troubleshooting

Common Issues

Tab Content Not Displaying

Problem: Tab content doesn't appear when switching between tabs or shows incorrect content.

Solution:

  • Verify that slot names in content elements match the name property in tab items exactly. Check that the selected property is properly bound and updated. Ensure content elements are direct children of the tabs component.

Scroll Controls Not Working

Problem: Scroll arrows don't appear or don't function correctly when tab bar overflows.

Solution:

  • Confirm that the tabs container has proper width constraints and overflow settings. Check that tab bar has enough content to trigger scrolling behavior. Verify that scroll event listeners are properly attached and not conflicting with other scroll handlers.

Tab Selection State Issues

Problem: Selected tab doesn't update correctly or shows wrong active state.

Solution:

  • Ensure that the selected property matches one of the tab item names exactly. Check that tab change events are properly handled and state is updated. Verify that disabled tabs are not interfering with selection logic.

Layout and Styling Problems

Problem: Tabs don't display correctly in different orientations or responsive breakpoints.

Solution:

  • Check that direction property is set correctly for horizontal or vertical layouts. Verify that container has appropriate dimensions for the chosen orientation. Ensure that CSS custom properties and design tokens are properly loaded and applied.

Implementation Support

  • Flexible Content Management - Comprehensive slot-based content system with automatic content switching and lifecycle management
  • Event-Driven Architecture - Complete event system for tab changes with detailed change information and state tracking capabilities
  • Responsive Design Integration - Built-in support for horizontal and vertical layouts with automatic scroll controls and touch-friendly interactions

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

For additional implementation guidance or framework-specific questions, consult the PWC Design System documentation or reach out to the component library team.