Simple Tabs

Keyboard accessible Tabs Web Component that changes to an Accordion in small spaces.

JavaScript is used to enable View Transitions that animate the the page when the active tab is changed.

1. Demo

• View 📁dist/ folder on Netlify
• CodePen Demo

2. Scripts and Styles

2.1. Script

• Load the scrip. Adjust the path as needed:

<script src="./simple-tabs.js"></script>

• Or load it as a module:

<script src="./simple-tabs.js" type="module"></script>

2.2. Styles

• Adjust the URL of the Scoped Style Sheet to the correct path:

<simple-tabs>
    <template shadowrootmode="open">
        <!-- Scoped Style Sheet -->
        <link rel="stylesheet" href="./simple-tabs.css">
        <!-- ... -->
    </template>
</simple-tabs>

3. Tabs and Tab Panels

<label role="tab" id="tab-1">
    <input type="radio" name="tabs" checked>
    Tab Name
</label>
<div role="tabpanel" aria-labelledby="tab-1">
    <p>Tab Content.</p>
</div><!-- /tabpanel -->

4. Full Example

<simple-tabs>
    <template shadowrootmode="open">
        <!-- Scoped Stylesheet -->
        <link rel="stylesheet" href="./simple-tabs.css">
        <div class="simple-tabs" role="tabs">

            <label role="tab" id="tab-1">
                <input type="radio" name="tabs" checked>
                First Tab
            </label>
            <div role="tabpanel" aria-labelledby="tab-1">
                <p>Lorem ipsum dolor.</p>
            </div><!-- /[role=tabpanel] -->

            <label role="tab" id="tab-2">
                <input type="radio" name="tabs">
                Second Tab
            </label>
            <div role="tabpanel" aria-labelledby="tab-2">
                <p>Tempora facilis aperiam.</p>
            </div><!-- /[role=tabpanel] -->

        </div><!-- /.simple-tabs -->
    </template>
</simple-tabs>

<!-- Simple Tabs Script -->
<script src="./simple-tabs.js type="module"></script>

5. Style Overriding

You can override the default values for certain properties from your global CSS. E.g:

:root {
    --st-tabs-color: #ff0000; /* red */
    --st-tab-font: system-ui;
}

6. Notes

6.1. Uses:

• Container Queries to change between tabs and accordion at 600px.
• View Transitions to animate elements that follow the tabs in the DOM.
• Declarative Shadow DOM to isolate the tab styles.

6.2. Features:

• Keyboard accessible: the ← and → keys (as well as ↑/↓) can be used after keyboard-navigating into the tabs.
• JavaScript is only used to add the view-transition-name's that enable the View Transitions.
• The Declarative Shadow DOM, particularly the isolated CSS inside the component's <template>, works without JavaScript.