Foundation Tabs

Foundation Tabs are components used to switch between multiple content panels. This chapter covers various uses of tab components.

Basic Tabs

Use .tabs and .tabs-content to create basic tabs:

html

<ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active">
        <a href="#panel1" aria-selected="true">Tab 1</a>
    </li>
    <li class="tabs-title">
        <a href="#panel2">Tab 2</a>
    </li>
    <li class="tabs-title">
        <a href="#panel3">Tab 3</a>
    </li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
        <p>This is the content of the first tab.</p>
    </div>
    <div class="tabs-panel" id="panel2">
        <p>This is the content of the second tab.</p>
    </div>
    <div class="tabs-panel" id="panel3">
        <p>This is the content of the third tab.</p>
    </div>
</div>

Vertical Tabs

Create vertically oriented tabs:

html

<div class="grid-x">
    <div class="cell medium-3">
        <ul class="tabs vertical" data-tabs id="vertical-tabs">
            <li class="tabs-title is-active">
                <a href="#vpanel1" aria-selected="true">Tab 1</a>
            </li>
            <li class="tabs-title">
                <a href="#vpanel2">Tab 2</a>
            </li>
            <li class="tabs-title">
                <a href="#vpanel3">Tab 3</a>
            </li>
        </ul>
    </div>
    <div class="cell medium-9">
        <div class="tabs-content vertical" data-tabs-content="vertical-tabs">
            <div class="tabs-panel is-active" id="vpanel1">
                <p>Content of vertical tab 1.</p>
            </div>
            <div class="tabs-panel" id="vpanel2">
                <p>Content of vertical tab 2.</p>
            </div>
            <div class="tabs-panel" id="vpanel3">
                <p>Content of vertical tab 3.</p>
            </div>
        </div>
    </div>
</div>

Responsive Tabs

Display as accordion on small screens:

html

<ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" id="responsive-tabs">
    <li class="tabs-title is-active">
        <a href="#rpanel1" aria-selected="true">Tab 1</a>
    </li>
    <li class="tabs-title">
        <a href="#rpanel2">Tab 2</a>
    </li>
    <li class="tabs-title">
        <a href="#rpanel3">Tab 3</a>
    </li>
</ul>

<div class="tabs-content" data-tabs-content="responsive-tabs">
    <div class="tabs-panel is-active" id="rpanel1">
        <p>Will display as accordion on mobile.</p>
    </div>
    <div class="tabs-panel" id="rpanel2">
        <p>Displays as tabs on tablet and desktop.</p>
    </div>
    <div class="tabs-panel" id="rpanel3">
        <p>Try resizing the browser window to see the effect.</p>
    </div>
</div>

Custom Styling

Bordered Tabs

html

<style>
    .tabs.bordered {
        border: 1px solid #e6e6e6;
        border-bottom: none;
    }
    .tabs.bordered .tabs-title > a {
        border: 1px solid transparent;
        border-bottom: none;
        margin-right: -1px;
    }
    .tabs.bordered .tabs-title.is-active > a {
        background: white;
        border: 1px solid #e6e6e6;
        border-bottom: 1px solid white;
        margin-bottom: -1px;
    }
    .tabs-content.bordered {
        border: 1px solid #e6e6e6;
    }
</style>

<ul class="tabs bordered" data-tabs id="bordered-tabs">
    <!-- Tab titles -->
</ul>
<div class="tabs-content bordered" data-tabs-content="bordered-tabs">
    <!-- Tab content -->
</div>

Pill Tabs

html

<style>
    .tabs.pills .tabs-title > a {
        border-radius: 50px;
        padding: 0.5rem 1.5rem;
    }
    .tabs.pills .tabs-title.is-active > a {
        background: #1779ba;
        color: white;
    }
</style>

<ul class="tabs pills" data-tabs id="pills-tabs">
    <li class="tabs-title is-active">
        <a href="#pills1" aria-selected="true">Option 1</a>
    </li>
    <li class="tabs-title">
        <a href="#pills2">Option 2</a>
    </li>
    <li class="tabs-title">
        <a href="#pills3">Option 3</a>
    </li>
</ul>

Colored Tabs

html

<style>
    .tabs.primary .tabs-title.is-active > a {
        background: #1779ba;
        color: white;
    }
    .tabs.success .tabs-title.is-active > a {
        background: #3adb76;
        color: white;
    }
</style>

Tabs with Icons

html

<ul class="tabs" data-tabs id="icon-tabs">
    <li class="tabs-title is-active">
        <a href="#icon1" aria-selected="true">
            <i class="fi-home"></i> Home
        </a>
    </li>
    <li class="tabs-title">
        <a href="#icon2">
            <i class="fi-torso"></i> Profile
        </a>
    </li>
    <li class="tabs-title">
        <a href="#icon3">
            <i class="fi-widget"></i> Settings
        </a>
    </li>
</ul>

Deep Linking

Support URL hash linking:

html

<ul class="tabs" data-tabs id="deep-link-tabs"
    data-deep-link="true"
    data-update-history="true"
    data-deep-link-smudge="true">
    <li class="tabs-title is-active">
        <a href="#overview" aria-selected="true">Overview</a>
    </li>
    <li class="tabs-title">
        <a href="#features">Features</a>
    </li>
    <li class="tabs-title">
        <a href="#pricing">Pricing</a>
    </li>
</ul>

Dynamic Content Loading

Use AJAX to load tab content:

html

<ul class="tabs" data-tabs id="ajax-tabs">
    <li class="tabs-title is-active">
        <a href="#static" aria-selected="true">Static Content</a>
    </li>
    <li class="tabs-title">
        <a href="#dynamic" data-load-url="/api/content">Dynamic Load</a>
    </li>
</ul>

<script>
$(document).ready(function() {
    $('[data-load-url]').on('click', function(e) {
        var url = $(this).data('load-url');
        var targetId = $(this).attr('href');

        $.get(url, function(data) {
            $(targetId).html(data);
        });
    });
});
</script>

Configuration Options

html

<ul class="tabs" data-tabs
    data-deep-link="false"
    data-update-history="false"
    data-deep-link-smudge="false"
    data-deep-link-smudge-delay="300"
    data-auto-focus="true"
    data-wrap-on-keys="true"
    id="config-tabs">
    <!-- Tabs -->
</ul>

Option	Description	Default
`data-deep-link`	Enable deep linking	false
`data-update-history`	Update browser history	false
`data-auto-focus`	Auto focus on tab switch	true
`data-wrap-on-keys`	Keyboard cycle navigation	true

JavaScript API

Methods

javascript

// Get instance
var tabs = new Foundation.Tabs($('#my-tabs'));

// Switch to specified panel
tabs.selectTab('#panel2');
tabs.selectTab($('#panel2'));
tabs.selectTab(1); // index

Events

javascript

$('#my-tabs').on('change.zf.tabs', function(event, tab) {
    console.log('Switched to:', tab);
});

Complete Example

html

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Tabs Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        /* Pills */
        .tabs.pills { background: none; border: none; }
        .tabs.pills .tabs-title > a {
            border-radius: 50px;
            padding: 0.5rem 1.5rem;
            background: #f4f4f4;
        }
        .tabs.pills .tabs-title.is-active > a {
            background: #1779ba;
            color: white;
        }

        /* Colored */
        .tabs.primary .tabs-title.is-active > a {
            background: #1779ba;
            color: white;
        }
        .tabs.success .tabs-title.is-active > a {
            background: #3adb76;
            color: white;
        }

        /* Bordered */
        .tabs.bordered {
            border: 1px solid #e6e6e6;
            border-radius: 4px 4px 0 0;
            border-bottom: none;
        }
        .tabs.bordered .tabs-title > a {
            border-radius: 4px 4px 0 0;
        }
        .tabs-content.bordered {
            border: 1px solid #e6e6e6;
            border-radius: 0 0 4px 4px;
            padding: 20px;
        }

        /* Icons */
        .tabs .tabs-title > a i {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Tabs Showcase</h1>

        <div class="demo-section">
            <h3>Basic Tabs</h3>
            <ul class="tabs" data-tabs id="basic-tabs">
                <li class="tabs-title is-active">
                    <a href="#basic1" aria-selected="true">Tab 1</a>
                </li>
                <li class="tabs-title">
                    <a href="#basic2">Tab 2</a>
                </li>
                <li class="tabs-title">
                    <a href="#basic3">Tab 3</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="basic-tabs">
                <div class="tabs-panel is-active" id="basic1">
                    <h4>First Tab</h4>
                    <p>This is the content of the first tab. Foundation's tab component is very easy to use.</p>
                </div>
                <div class="tabs-panel" id="basic2">
                    <h4>Second Tab</h4>
                    <p>This is the content of the second tab. You can place any HTML elements here.</p>
                </div>
                <div class="tabs-panel" id="basic3">
                    <h4>Third Tab</h4>
                    <p>This is the content of the third tab.</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Tabs with Icons</h3>
            <ul class="tabs" data-tabs id="icon-tabs">
                <li class="tabs-title is-active">
                    <a href="#icon1" aria-selected="true"><i class="fi-home"></i> Home</a>
                </li>
                <li class="tabs-title">
                    <a href="#icon2"><i class="fi-torso"></i> Profile</a>
                </li>
                <li class="tabs-title">
                    <a href="#icon3"><i class="fi-widget"></i> Settings</a>
                </li>
                <li class="tabs-title">
                    <a href="#icon4"><i class="fi-mail"></i> Messages</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="icon-tabs">
                <div class="tabs-panel is-active" id="icon1">
                    <p>Home content...</p>
                </div>
                <div class="tabs-panel" id="icon2">
                    <p>Profile content...</p>
                </div>
                <div class="tabs-panel" id="icon3">
                    <p>Settings content...</p>
                </div>
                <div class="tabs-panel" id="icon4">
                    <p>Messages content...</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Pill Tabs</h3>
            <ul class="tabs pills" data-tabs id="pills-tabs">
                <li class="tabs-title is-active">
                    <a href="#pills1" aria-selected="true">All</a>
                </li>
                <li class="tabs-title">
                    <a href="#pills2">Published</a>
                </li>
                <li class="tabs-title">
                    <a href="#pills3">Drafts</a>
                </li>
                <li class="tabs-title">
                    <a href="#pills4">Archived</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="pills-tabs">
                <div class="tabs-panel is-active" id="pills1">
                    <p>Show all content...</p>
                </div>
                <div class="tabs-panel" id="pills2">
                    <p>Show published content...</p>
                </div>
                <div class="tabs-panel" id="pills3">
                    <p>Show draft content...</p>
                </div>
                <div class="tabs-panel" id="pills4">
                    <p>Show archived content...</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Bordered Tabs</h3>
            <ul class="tabs bordered" data-tabs id="bordered-tabs">
                <li class="tabs-title is-active">
                    <a href="#bordered1" aria-selected="true">Description</a>
                </li>
                <li class="tabs-title">
                    <a href="#bordered2">Specifications</a>
                </li>
                <li class="tabs-title">
                    <a href="#bordered3">Reviews</a>
                </li>
            </ul>
            <div class="tabs-content bordered" data-tabs-content="bordered-tabs">
                <div class="tabs-panel is-active" id="bordered1">
                    <h4>Product Description</h4>
                    <p>This is the detailed product description...</p>
                </div>
                <div class="tabs-panel" id="bordered2">
                    <h4>Specifications</h4>
                    <table>
                        <tr><td>Dimensions</td><td>100 x 50 x 20 mm</td></tr>
                        <tr><td>Weight</td><td>150g</td></tr>
                        <tr><td>Colors</td><td>Black/White</td></tr>
                    </table>
                </div>
                <div class="tabs-panel" id="bordered3">
                    <h4>User Reviews</h4>
                    <p>No reviews yet</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Vertical Tabs</h3>
            <div class="grid-x">
                <div class="cell medium-3">
                    <ul class="tabs vertical" data-tabs id="vertical-tabs">
                        <li class="tabs-title is-active">
                            <a href="#vpanel1" aria-selected="true">Account Settings</a>
                        </li>
                        <li class="tabs-title">
                            <a href="#vpanel2">Privacy Settings</a>
                        </li>
                        <li class="tabs-title">
                            <a href="#vpanel3">Notification Settings</a>
                        </li>
                        <li class="tabs-title">
                            <a href="#vpanel4">Security Settings</a>
                        </li>
                    </ul>
                </div>
                <div class="cell medium-9">
                    <div class="tabs-content vertical" data-tabs-content="vertical-tabs" style="border-left: 1px solid #e6e6e6; padding-left: 20px;">
                        <div class="tabs-panel is-active" id="vpanel1">
                            <h4>Account Settings</h4>
                            <p>Manage your account information here...</p>
                        </div>
                        <div class="tabs-panel" id="vpanel2">
                            <h4>Privacy Settings</h4>
                            <p>Control your privacy options...</p>
                        </div>
                        <div class="tabs-panel" id="vpanel3">
                            <h4>Notification Settings</h4>
                            <p>Manage notification preferences...</p>
                        </div>
                        <div class="tabs-panel" id="vpanel4">
                            <h4>Security Settings</h4>
                            <p>Enhance account security...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Responsive Tabs</h3>
            <p class="text-muted">Displays as accordion on small screens, tabs on large screens.</p>
            <ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" id="responsive-tabs">
                <li class="tabs-title is-active">
                    <a href="#rtab1" aria-selected="true">Responsive 1</a>
                </li>
                <li class="tabs-title">
                    <a href="#rtab2">Responsive 2</a>
                </li>
                <li class="tabs-title">
                    <a href="#rtab3">Responsive 3</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="responsive-tabs">
                <div class="tabs-panel is-active" id="rtab1">
                    <p>Resize the window to see the effect change.</p>
                </div>
                <div class="tabs-panel" id="rtab2">
                    <p>Will become accordion on mobile.</p>
                </div>
                <div class="tabs-panel" id="rtab3">
                    <p>Keeps tab style on tablet and desktop.</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

Tab Best Practices

Clear labels: Use short, descriptive labels
Moderate quantity: Recommend no more than 5-7 tabs
Default option: Choose the most commonly used as the default active item
Accessibility: Ensure keyboard can operate
Responsive: Consider display effect on small screens

Summary

In this chapter we learned:

Creating basic tabs
Vertical tabs
Responsive tabs
Custom styling (bordered, pill, colored)
Tabs with icons
Deep linking
JavaScript API

Next chapter, we will learn Foundation Pagination.

Tip: Tabs are a good way to organize related content, but don't overuse them. Ensure each tab's content actually needs to be displayed separately.

Foundation Tabs ​

Basic Tabs ​

Vertical Tabs ​

Responsive Tabs ​

Custom Styling ​

Bordered Tabs ​

Pill Tabs ​

Colored Tabs ​

Tabs with Icons ​

Deep Linking ​

Dynamic Content Loading ​

Configuration Options ​

JavaScript API ​

Methods ​

Events ​

Complete Example ​

Tab Best Practices ​

Summary ​

Foundation Tabs

Basic Tabs

Vertical Tabs

Responsive Tabs

Custom Styling

Bordered Tabs

Pill Tabs

Colored Tabs

Tabs with Icons

Deep Linking

Dynamic Content Loading

Configuration Options

JavaScript API

Methods

Events

Complete Example

Tab Best Practices

Summary