Foundation CSS Tabs

Tabs are a common UI pattern used for organizing content into multiple sections within a single container. Foundation CSS provides a simple and flexible way to create tabbed interfaces using predefined styles and JavaScript components. Here's how to implement tabs using Foundation CSS:

1. Basic Tab Structure

To create a basic tab layout, use the tabs and tabs-content classes to define the container for tabs and their corresponding content sections. Each tab is represented by a list item (<li>) with an anchor tag (<a>), and each content section is enclosed within a <div> element.

<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 first tab's content.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>This is the second tab's content.</p>
  </div>
  <div class="tabs-panel" id="panel3">
    <p>This is the third tab's content.</p>
  </div>
</div>

2. Customizing Tabs

Foundation CSS provides various classes to customize the appearance and behavior of tabs, including colors, sizes, and alignment. You can add classes like align-center, vertical, or expanded to modify the layout and style of tabs.

<ul class="tabs align-center" 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>

3. JavaScript Initialization

To enable tab functionality, initialize the tabs using JavaScript. You can either use the Foundation JavaScript library or manually trigger tab initialization using JavaScript code.

$(document).foundation();

Conclusion

Foundation CSS provides a convenient and customizable way to implement tabbed interfaces in your web projects. By following the provided guidelines and utilizing Foundation CSS classes and JavaScript components, you can create tab layouts that enhance navigation and organization of content for your users.

Archive