Tabs: code & specs

This page documents the expected code output and structure necessary to display tabs correctly in the UI.

JS enhancements

This component uses JavaScript to enhance its functionality and behaviour. Additional setup may be required to ensure it works as intended within your implementation. Below is the JS used for this component.

tabs.js

Tabs base code

Tab panel 1

Tab panel 2

Tab panel 3

html

<div class="tabs element_block align wp-block-acf-tabs">
    <div class="tab-items">
        <div class="tab-items-scroll">
            <ul class="nav nav-underline" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tabs-tab-1-tab" data-bs-toggle="pill" data-bs-target="#tabs-tab-1" type="button" role="tab" aria-controls="tabs-tab-1" aria-selected="true">
                        Tab 1                        
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tabs-tab-2-tab" data-bs-toggle="pill" data-bs-target="#tabs-tab-2" type="button" role="tab" aria-controls="tabs-tab-2" aria-selected="false">
                        Tab 2 
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tabs-tab-3-tab" data-bs-toggle="pill" data-bs-target="#tabs-tab-3" type="button" role="tab" aria-controls="tabs-tab-3" aria-selected="false">
                        Tab 3
                    </button>
                </li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane fade active show" id="tabs-tab-1" role="tabpanel" aria-labelledby="tabs-tab-1-tab" tabindex="0">
            <div class="text-block">
                <h4 class="title-01">Tab panel 1</h4>
            </div>
        </div>
        <div class="tab-pane fade" id="tabs-tab-2" role="tabpanel" aria-labelledby="tabs-tab-2-tab" tabindex="0">
            <div class="text-block">
                <h4 class="title-01">Tab panel 2</h4>
            </div>
        </div>
        <div class="tab-pane fade" id="tabs-tab-3" role="tabpanel" aria-labelledby="tabs-tab-3-tab" tabindex="0">
            <div class="text-block">
                <h4 class="title-01">Tab panel 3</h4>
            </div>
        </div>
    </div>
</div>

Scrollable tabs

Scroll buttons should be automatically added when the tabs overflow their container.

html

<div class="tabs element_block align wp-block-acf-tabs">
    <div class="tab-items">
        <button type="button" class="btn btn-ghost tab-scroll tab-scroll-left" aria-label="Scroll tabs left" disabled>
            <div class="btn-icon">
                <i class="fa-regular fa-chevron-left" aria-hidden="true"></i>
            </div>
        </button>
        <div class="tab-items-scroll">
            <ul class="nav nav-underline" role="tablist">
                ...
            </ul>
        </div>
        <button type="button" class="btn btn-ghost tab-scroll tab-scroll-right" aria-label="Scroll tabs right">
            <div class="btn-icon">
                <i class="fa-regular fa-chevron-right" aria-hidden="true"></i>
            </div>
        </button>
    </div>

    <div class="tab-content">
        ...
    </div>
</div>

Tab item icons

Add Font Awesome icons directly inside the button with no spaces before the label.

html

<li class="nav-item">
    <button class="nav-link">
        <i class="fa-regular fa-ghost"></i>Tab 1                        
    </button>
</li>