Tabs Component - JSON API Examples

Learn how to create accessible tabbed interfaces with the JSON Layout API

Back to Component Examples

Example 1: Basic Tabs

A simple tabbed interface with three tabs. Perfect for organizing related content into separate views.

JavaScript Code • JS
// V2 API - Semantic Content Types
const config = {
    version: 2,
    layoutId: "tabs-demo-1",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "tabs",
                tabs: [
                    {
                        id: "tab1",
                        label: "Overview",
                        content: "<h3>Overview</h3><p>Welcome to RSL Tabs! This component provides accessible, keyboard-navigable tabbed interfaces.</p>"
                    },
                    {
                        id: "tab2",
                        label: "Features",
                        content: "<h3>Features</h3><ul><li>WCAG 2.1 AA Compliant</li><li>Keyboard Navigation</li><li>ARIA Support</li></ul>"
                    },
                    {
                        id: "tab3",
                        label: "Pricing",
                        content: "<h3>Pricing</h3><p>RSL is completely free and open source. Zero cost, zero dependencies!</p>"
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Tabs with Icons

Enhance your tabs with icons for better visual recognition and improved user experience.

JavaScript Code • JS
// V2 API - Tabs with Icons
const config = {
    version: 2,
    layoutId: "tabs-demo-2",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "tabs",
                tabs: [
                    {
                        id: "profile",
                        label: "Profile",
                        icon: "fas fa-user",
                        content: "<h3>Profile Settings</h3><p>Manage your personal information and preferences.</p>"
                    },
                    {
                        id: "settings",
                        label: "Settings",
                        icon: "fas fa-cog",
                        content: "<h3>General Settings</h3><p>Configure application-wide settings and defaults.</p>"
                    },
                    {
                        id: "notifications",
                        label: "Notifications",
                        icon: "fas fa-bell",
                        content: "<h3>Notification Preferences</h3><p>Control how and when you receive notifications.</p>"
                    },
                    {
                        id: "security",
                        label: "Security",
                        icon: "fas fa-lock",
                        content: "<h3>Security Settings</h3><p>Manage your password, two-factor authentication, and security preferences.</p>"
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Tabs with Grid Content

Tabs can contain complex layouts including grids. The JSON API automatically initializes nested layouts.

JavaScript Code • JS
// V2 API - Tabs with Nested Grids
const config = {
    version: 2,
    layoutId: "tabs-demo-3",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "tabs",
                tabs: [
                    {
                        id: "products",
                        label: "Products",
                        content: `<h3>Our Products</h3>
                            <div class="slot-layout" data-cols-xs="1" data-cols-sm="2" data-cols-md="3">
                                <div class="slot-item" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <h4>Product A</h4>
                                    <p>Premium features for professionals.</p>
                                </div>
                                <div class="slot-item" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <h4>Product B</h4>
                                    <p>Essential tools for teams.</p>
                                </div>
                                <div class="slot-item" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <h4>Product C</h4>
                                    <p>Free tier for individuals.</p>
                                </div>
                            </div>`
                    },
                    {
                        id: "services",
                        label: "Services",
                        content: `<h3>Our Services</h3>
                            <div class="slot-layout" data-cols-xs="1" data-cols-md="2">
                                <div class="slot-item" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <h4>Consulting</h4>
                                    <p>Expert guidance for your projects.</p>
                                </div>
                                <div class="slot-item" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
                                    <h4>Support</h4>
                                    <p>24/7 technical assistance.</p>
                                </div>
                            </div>`
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);