Tabbed List Template

An accessible tabbed interface that lets users switch between different lists of content.

This is a highly effective pattern for organizing categorized content, such as different types of services, product features, or pricing plans, without cluttering the page.

A screenshot of a tabbed interface with several tabs and the active tab's content showing below.

Get Source Code Preview

About this Template

This component provides a fully accessible tabbed interface, following WAI-ARIA best practices. The structure consists of a list of tab buttons that control the visibility of corresponding content panels. The state of the tabs (e.g., which one is currently selected) is managed with JavaScript, which updates the appropriate ARIA attributes and CSS classes.

Features

Fully Accessible: Uses correct ARIA roles (tablist, tab, tabpanel) and states (aria-selected, aria-controls) to ensure it is usable with screen readers and other assistive technologies.
Keyboard Navigation: Supports arrow key navigation between tabs as per accessibility guidelines.
Pure JavaScript Logic: The tab switching functionality is self-contained and dependency-free.
Clean, Modern Styling: Features a simple and clean design with clear visual indication for the active tab.
Self-Contained: The component is fully scoped and ready to drop into any project.

Code Breakdown

The component is wrapped in a main div. The tabs themselves are in a div with role="tablist", and each tab is a button with role="tab". Each tab button has an aria-controls attribute that points to the id of the content panel it controls.

The content panels are located in a separate container. Each panel is a div with role="tabpanel". By default, all but the first panel are hidden.

The JavaScript adds a click event listener to the tablist. When a tab is clicked, the script first deactivates all other tabs and hides all other panels. Then, it activates the clicked tab (by setting aria-selected="true" and an active class) and shows the corresponding panel by finding it via the tab's aria-controls attribute.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Tabbed List Component Styles - Copy from here
           ========================================================================== */
        .tabbed-list-template {
            --tab-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --tab-primary-text-color: #1e293b;
            --tab-secondary-text-color: #64748b;
            --tab-accent-color: #4f46e5;
            --tab-bg-color: #ffffff;
            --tab-border-color: #cbd5e1;

font-family: var(--tab-font-family);
            color: var(--tab-primary-text-color);
            width: 100%;
            max-width: 700px;
        }

.tabbed-list-template *,
        .tabbed-list-template *::before,
        .tabbed-list-template *::after {
            box-sizing: border-box;
        }

.tabbed-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .tabbed-list-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
        }
        
        [role="tablist"] {
            display: flex;
            gap: .25rem;
            border-bottom: 1px solid var(--tab-border-color);
        }
        
        [role="tab"] {
            background: transparent;
            border: none;
            padding: .75rem 1.25rem;
            font-size: .9rem;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            bottom: -1px; /* Align with border */
            border-bottom: 3px solid transparent;
            color: var(--tab-secondary-text-color);
            transition: color 0.2s ease;
        }

[role="tab"]:hover {
            color: var(--tab-accent-color);
        }
        
        [role="tab"]:focus-visible {
            outline: 2px solid var(--tab-accent-color);
            outline-offset: 2px;
            border-radius: .25rem;
        }
        
        [role="tab"][aria-selected="true"] {
            color: var(--tab-accent-color);
            border-bottom-color: var(--tab-accent-color);
        }
        
        [role="tabpanel"] {
            padding: 2rem;
            background: var(--tab-bg-color);
            border: 1px solid var(--tab-border-color);
            border-top: none;
            border-radius: 0 0 .5rem .5rem;
        }
        
        /* Hide non-active panels */
        [role="tabpanel"][hidden] {
            display: none;
        }
        
        .award-list {
            list-style: disc;
            padding-left: 1.5rem;
            margin: 0;
            line-height: 1.7;
        }

</style>
</head>
<body>

<div class="tabbed-list-template">
    <header class="list-header">
        <h2>Employee of the Month Awards</h2>
    </header>

<div role="tablist" aria-label="Award Categories">
        <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Most Enthusiastic</button>
        <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Best Coffee Maker</button>
        <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">Quietest Typer</button>
    </div>

<div>
        <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
            <ul class="award-list">
                <li>Barbara for her unwavering excitement during the quarterly budget review.</li>
                <li>Steve for his spirited defense of the Oxford comma in company-wide emails.</li>
                <li>Brenda for organizing the mandatory "fun" day with unmatched zeal.</li>
            </ul>
        </div>
        <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
             <ul class="award-list">
                <li>Gary, whose brews somehow transcend the limitations of the ancient office coffee machine.</li>
                <li>Susan for remembering who takes cream and who is "strictly oat milk."</li>
            </ul>
        </div>
        <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
             <ul class="award-list">
                <li>Dave, whose keyboard sounds like a gentle whisper in a library.</li>
                <li>Eleanor, who manages to write entire manifestos without a single audible 'click'.</li>
                <li>The potted fern in the corner, which has yet to make any noise at all.</li>
            </ul>
        </div>
    </div>
    
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const listContainer = document.querySelector('.tabbed-list-template');
            if (!listContainer) return;
        
            const tabList = listContainer.querySelector('[role="tablist"]');
            const tabs = listContainer.querySelectorAll('[role="tab"]');
        
            tabList.addEventListener('click', (e) => {
                const clickedTab = e.target.closest('[role="tab"]');
                if (!clickedTab) return;
        
                e.preventDefault();
                switchTab(clickedTab);
            });
            
            tabList.addEventListener('keydown', (e) => {
                const currentTab = e.target.closest('[role="tab"]');
                let newTab;
        
                if (e.key === 'ArrowRight') {
                    newTab = currentTab.nextElementSibling || tabs[0];
                } else if (e.key === 'ArrowLeft') {
                    newTab = currentTab.previousElementSibling || tabs[tabs.length - 1];
                }
        
                if (newTab) {
                    newTab.focus();
                    switchTab(newTab);
                }
            });
            
            const switchTab = (newTab) => {
                // Find the panel for the new tab
                const activePanelId = newTab.getAttribute('aria-controls');
                const activePanel = listContainer.querySelector(`#${activePanelId}`);
        
                // Deactivate all other tabs and hide all other panels
                tabs.forEach(tab => {
                    tab.setAttribute('aria-selected', 'false');
                    tab.setAttribute('tabindex', '-1');
                    
                    const panelId = tab.getAttribute('aria-controls');
                    const panel = listContainer.querySelector(`#${panelId}`);
                    panel.hidden = true;
                });
        
                // Activate the new tab and show its panel
                newTab.setAttribute('aria-selected', 'true');
                newTab.setAttribute('tabindex', '0');
                activePanel.hidden = false;
            };
        });
    </script>
</div>

</body>
</html>

View Output