Simple Navigation Tab

Enhance website navigation with our versatile navigation tab UI component, seamlessly integrating HTML, CSS, and JavaScript functionalities.

Preview
Code

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
  <button class="tablinks" onclick="openTab(event, 'About')">About</button>
  <button class="tablinks" onclick="openTab(event, 'Services')">
    Services
  </button>
  <button class="tablinks" onclick="openTab(event, 'Contact')">
    Contact
  </button>
</div>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Content for home tab goes here.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Content for about tab goes here.</p>
</div>

<div id="Services" class="tabcontent">
  <h3>Services</h3>
  <p>Content for services tab goes here.</p>
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Content for contact tab goes here.</p>
</div>

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

@media screen and (max-width: 600px) {
  .tab button {
    width: 100%;
  }
}

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Our Navigation Tab UI Component offers a robust solution for organizing and presenting content on your website, powered by the trifecta of HTML, CSS, and JavaScript. Designed to optimize user navigation, this component provides an intuitive interface for users to explore different sections of your website effortlessly.

With dynamic tab-switching functionality, users can quickly switch between categories, pages, or sections, enhancing discoverability and engagement. The responsive design ensures seamless performance across various devices, catering to the diverse needs of your audience.

Key Features:

Customizable Tabs: Tailor the appearance and behavior of tabs to suit your website's design and navigation requirements.
Smooth Transitions: Enjoy fluid transitions between tabs, enhancing the overall user experience and visual appeal.
Tab Content Flexibility: Easily integrate diverse content types within each tab, from text and images to interactive elements and forms.
Interactive Effects: Add interactive hover effects or animations to tabs, enriching the user interaction and guiding user behavior.

Our Navigation Tab UI Component is designed with simplicity and versatility in mind, offering an easy-to-implement solution for enhancing website navigation. Whether you're building a portfolio, e-commerce site, or informational platform, our component empowers you to create intuitive navigation experiences that captivate and retain users.

Steps to Copy the Code

Looking to enhance your website's navigation with sleek and interactive tab functionality? Our step-by-step guide will walk you through creating a navigation tab using HTML, CSS, and JavaScript. Follow these simple steps to implement a dynamic and user-friendly navigation experience for your website visitors.

Step 1: Copy the Code Snippet

Begin by copying the HTML, CSS, and JavaScript code snippet provided above. This snippet serves as the foundation of our navigation tab component. Simply select the code, click the copy button and the code will be copied to your clipboard.

Step 2: Link CSS and JS Files

Ensure that you link the CSS and JavaScript files correctly in your HTML document. Place the CSS code inside the <style> tag in the <head> section of your HTML file, and include the JavaScript code either inline or by linking an external JavaScript file.

Step 3: Personalize Your Navigation Tab

Customize the navigation tab component to align with your website's branding and design aesthetic. You can adjust the colors, sizes, styles, and functionality by modifying the CSS styles and JavaScript code accordingly. Experiment with different tab layouts and effects to create a unique and engaging navigation experience for your users.

With these straightforward steps, you can quickly implement a navigation tab using HTML, CSS, and JavaScript, elevating your website's navigation to the next level. Make the navigation tab your own by tailoring it to suit your website's specific requirements and design preferences.

Code Explanation

HTML Code

1. Tab Container:

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
  <button class="tablinks" onclick="openTab(event, 'About')">About</button>
  <button class="tablinks" onclick="openTab(event, 'Services')">Services</button>
  <button class="tablinks" onclick="openTab(event, 'Contact')">Contact</button>
</div>

This <div> acts as a container for the tab buttons.
Inside it, there are four <button> elements with the class "tablinks", each representing a tab.
Each button has an onclick attribute calling the openTab function with different tab names ('Home', 'About', 'Services', 'Contact').

2. Tab Content:

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Content for home tab goes here.</p>
</div>
<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Content for about tab goes here.</p>
</div>
<div id="Services" class="tabcontent">
  <h3>Services</h3>
  <p>Content for services tab goes here.</p>
</div>
<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Content for contact tab goes here.</p>
</div>

These <div> elements represent the content of each tab.
Each <div> has an id corresponding to the tab name ('Home', 'About', 'Services', 'Contact') and the class "tabcontent".
Inside each <div>, there's an <h3> element representing the tab title and a <p> element containing the content specific to that tab.

CSS Code

Tab Container Styles:

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab: Select elements with the class "tab".
overflow: hidden;: Hides any content that overflows the tab container.
border: 1px solid #ccc;: Sets a 1-pixel solid border with a light gray color (#ccc) around the tab container.
background-color: #f1f1f1;: Sets the background color of the tab container to a light gray shade (#f1f1f1).

Tab Button Styles:

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button: Selects button elements within the tab container.
background-color: inherit;: Inherits the background color of the parent element for the button.
float: left;: Floats the buttons to the left, allowing them to align horizontally.
border: none;: Removes the border from the buttons.
outline: none;: Removes the outline when the button is focused.
cursor: pointer;: Changes the cursor to a pointer when hovering over the button.
padding: 14px 16px;: Adds padding of 14 pixels on the top and bottom, and 16 pixels on the left and right, creating spacing around the button text.
transition: 0.3s;: Adds a smooth transition effect of 0.3 seconds to button properties that change over time.

Hover Styles for Tab Buttons:

.tab button:hover {
  background-color: #ddd;
}

.tab button:hover: Selects button elements within the tab container when hovered over.
Changes the background color of the buttons to a lighter shade of gray (#ddd) when hovered over.

Active Tab Button Styles:

.tab button.active {
  background-color: #ccc;
}

.tab button.active: Select the button element within the tab container that has the class "active", representing the currently active tab.
Changes the background color of the active button to a medium shade of gray (#ccc).

Tab Content Styles:

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent: Selects elements with the class "tabcontent".
display: none;: Hides the tab content by default.
padding: 6px 12px;: Adds padding of 6 pixels on the top and bottom, and 12 pixels on the left and right, creating spacing inside the tab content.
border: 1px solid #ccc;: Sets a 1-pixel solid border with a light gray color (#ccc) around the tab content.
border-top: none;: Removes the top border of the tab content to avoid duplication with the tab buttons.

Media Query for Responsive Design:

@media screen and (max-width: 600px) {
  .tab button {
    width: 100%;
  }
}

Applies styles to button elements within the tab container when the screen width is 600 pixels or less.
Sets the width of the buttons to 100% to make them span the entire width of their container, ensuring better display on small screens.

JavaScript Code

Function Declaration:

function openTab(evt, tabName) {
}

This defines a function named openTab that takes two parameters: evt (the event object) and tabName (the name of the tab to be opened).

Variable Declaration:

var i, tabcontent, tablinks;

Declares three variables:
i: Loop counter variable.
tabcontent: Represents all elements with the class "tabcontent" (i.e., the content of each tab).
tablinks: Represents all elements with the class "tablinks" (i.e., the tab buttons).

Hiding Tab Content:

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}

Retrieves all elements with the class "tabcontent" and stores them in the tabcontent variable.
Iterates through each tab content element and sets its display style property to "none", effectively hiding all tab contents.

Removing Active State from Tab Links:

tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
}

Retrieves all elements with the class "tablinks" and stores them in the tablinks variable.
Iterates through each tab link element and removes the "active" class from its class list. This ensures that no tab link is highlighted as active.

Displaying Selected Tab Content:

document.getElementById(tabName).style.display = "block";

Retrieves the element with the ID equal to tabName (the name of the tab to be opened) and sets its display style property to "block", making it visible.

Adding Active State to Selected Tab Link:

evt.currentTarget.className += " active";

Adds the "active" class to the tab link that triggered the event (evt.currentTarget). This highlights the selected tab as active.