W3.CSS Navigation Tabs

Toggle navigation
TUTORIAL HOME
W3.CSS Navigation Tabs
❮ Previous Next ❯
London Paris Tokyo
London
London is the capital of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Tabbed Navigation
Tabbed navigation is a way to navigate around a website.

Normally, tabbed navigation uses navigation buttons (tabs) arranged together with the selected tab highlighted.

This example uses elements with the same class name ("city" in our example) , and changes the style between display:none and display:block to hide and display different content:

Example
<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>
And some clickable buttons to open the tabbed content:

Example
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
And a JavaScript to do the job:

Example
function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(cityName).style.display = "block";
}
»
JavaScript Explained
The openCity() function is called when the user clicks on one of the buttons in the menu.

The function hides all elements with the class name "city" (display="none"), and displays the element with the given city name (display="block");

Closable Tabs
London Paris Tokyo
×
London
London is the capital city of England.

×
Paris
Paris is the capital of France.

×
Tokyo
Tokyo is the capital of Japan.

To close a tab, add onclick="this.parentElement.style.display='none'" to an element inside the tab container:

Example
<div id="London" class="w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>
»
Active/Current Tab
To highlight the current tab/page the user is on, use JavaScript and add a color class to the active link. In the example below, we have added a "tablink" class to each link. That way, it is easy to get all links that is associated with tabs, and give the current tab link a "w3-red" class, to highlight it:

Example
function openCity(evt, cityName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " w3-red";
}
»
Vertical Tabs
Example
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
»
Animated Tab Content
Use any of the w3-animate-classes to fade, zoom or slide in tab content:

Example
<div id="London" class="w3-container city w3-animate-left">
  <p>London is the capital city of England.</p>
</div>
»
Tabbed Image Gallery
Click on an image:


×
Nature
Example
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
  <img src="img_nature.jpg" alt="Nature">
</a>

<div id="Nature" class="picture w3-display-container">
  <img src="img_nature_wide.jpg" alt="Nature" style="width:100%">
  <span onclick="this.parentElement.style.display='none'" class="w3-display-topright">&times;</span>
  <div class="w3-display-bottomleft w3-container">Nature</div>
</div>
»
Tabs in a Grid
Using tabs in a third column layout. Note that we add a bottom border to the active tab, instead of a background color:

Example
»

❮ Previous Next ❯