Foundation Tabs

Tab navigation can effectively display different content and allow for content switching.

Tabs are created using <ul class="tabs" data-tab>, and individual tabs are created using <li> elements with the .tab-title class.

Tip: The currently selected tab can use the .active class.

Example

<ul class="tabs" data-tab>  <li class="tab-title active"><a href="#">Home</a></li>  <li class="tab-title"><a href="#">Menu 1</a></li>  
    <li class="tab-title"><a href="#">Menu 2</a></li>  <li 
    class="tab-title"><a href="#">Menu 3</a></li></ul>

Vertical Tabs

Vertical tabs can use the .vertical class:

Example

<ul class="tabs vertical" data-tab>

Switching Tabs

To set up switching tabs, use a <div> element with the .content class. Each tab should have a unique ID and be linked to the list item (e.g., <a href="#menu1"> will open the content with id="menu1"). Finally, place all tab content inside a <div> element with the .tabs-content class and initialize Foundation JS.

Note that the .active class will automatically be added to the currently selected tab:

Example

<ul class="tabs" data-tab>  <li class="tab-title active"><a href="#home">Home</a></li>  
    <li class="tab-title"><a href="#menu1">Menu 1</a></li>  <li 
    class="tab-title"><a href="#menu2">Menu 2</a></li>  <li 
    class="tab-title"><a href="#menu3">Menu 3</a></li></ul><div 
    class="tabs-content">  <div class="content active" id="home">    
    <h3>HOME</h3>    <p>Home is where the heart is..</p>  
    </div>  <div class="content" id="menu1">    
    <h3>Menu 1</h3>    <p>Some text, blabla</p>  
    </div>  <div class="content" id="menu2">    
    <h3>Menu 2</h3>    <p>Some other text.</p>  
    </div>  <div class="content" id="menu3">    
    <h3>Menu 3</h3>    <p>Last tab.</p>  </div>
    </div><!-- Initialize Foundation JS --><script>$(document).ready(function() {    
    $(document).foundation();})</script>

Tab Fade-In

Customize the tab fade-in effect using CSS:

Example

.tabs-content > .content.active {    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;}@-webkit-keyframes fadeEffect {
    from {opacity: 0;}    to {opacity: 1;}}@keyframes fadeEffect 
    {    from {opacity: 0;}    to {opacity: 1;}
    }