Simple Tabs

Keyboard-navigable 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. From a CDN

Demo using a CDN: https://codepen.io/nonsalant/pen/ogjWXjK/9a18cfdc8de22b8101198fe415af974b

2.1.1. Script

• Load the script:

<script src="https://unpkg.com/simple-tabs-component/simple-tabs.js"></script>

• Or load it as a module:

<script src="https://unpkg.com/simple-tabs-component/simple-tabs.js" type="module"></script>

2.1.2. Styles

• Load the Scoped Stylesheet inside the component markup:

<simple-tabs>
    <template shadowrootmode="open">
        <!-- Scoped Stylesheet -->
        <link rel="stylesheet" href="https://unpkg.com/simple-tabs-component/simple-tabs.css">
        <!-- ... -->
    </template>
</simple-tabs>

2.2. From local files

You can also download the 2 files (simple-tabs.js and simple-tabs.css) and use them locally.

2.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.2. Styles

• Load the Scoped Stylesheet inside the component markup and adjust its URL 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:

• Arrow keys for navigation: after reaching the first tab element via Tab, use ←/→ (or ↑/↓) to switch 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.