How to Create a Simple Tab Navigation UI with HTML, CSS, and JavaScript

1. Introduction

Tab navigation helps organize content on a webpage efficiently, allowing users to switch between different sections without leaving the page. This tutorial will guide you through creating a tab navigation system with random data for testing.

2. Setting Up the HTML Structure

First, create the basic HTML structure for your tab navigation. This includes a container for the tabs, the content areas, and navigation buttons.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Create a Simple Tab Navigation UI with HTML, CSS, and JavaScript</title>
<meta name="description" content="Learn how to create a simple and elegant tab navigation UI using HTML, CSS, and JavaScript. This tutorial includes random data for testing and detailed steps for implementation.">
<meta name="keywords" content="tab navigation, HTML CSS JavaScript tabs, create tabs HTML, tabs UI tutorial, JavaScript tabs example, responsive tab navigation, simple tab navigation, web design tabs, HTML CSS JavaScript tutorial, front-end development tabs, interactive tabs web, coding tab interface, build tabs HTML, UI/UX tab navigation, web development tabs">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
    <div class="tab__list">
        <div class="tab-item">Tab 1</div>
        <div class="tab-item">Tab 2</div>
        <div class="tab-item">Tab 3</div>
    </div>
    <div class="tab__content">
        <div class="tab-content-item">Random 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div class="tab-content-item">Random 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div class="tab-content-item">Random 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    <div class="button-container">
        <button class="prev">Prev</button>
        <button class="next">Next</button>
    </div>
</div>
<script src="scripts.js"></script>
</body>
</html>

3. Styling the Tabs with CSS

Next, style your tabs to make them visually appealing. Use CSS to define the layout, colors, and transitions.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}
.tabs {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 600px;
    padding: 20px;
}
.tab__list {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}
.tab__list > div {
    padding: 10px 20px;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.3s;
}
.tab__list > div:hover {
    background-color: #f9f9f9;
}
.tab__content > div {
    display: none;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 4px;
}
.is--active {
    font-weight: bold;
    display: block !important;
    border-bottom: 2px solid #007BFF;
}
.button-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}
button:hover {
    background-color: #0056b3;
}

4. Adding Functionality with JavaScript

To make the tabs functional, add JavaScript to handle tab switching and navigation buttons.

document.addEventListener("DOMContentLoaded", () => {
    // Select the tab container
    const tabsContainer = document.querySelector(".tabs");
    function initializeTabs(tabsContainer) {
        // Select tab headers and content
        const tabList = tabsContainer.querySelector(".tab__list");
        const tabItems = Array.from(tabList.children);
        const tabContent = tabsContainer.querySelector(".tab__content");
        const tabContentItems = Array.from(tabContent.children);
        let activeIndex = 0;
        // Set the active tab
        function setActiveTab(index) {
            tabItems.forEach(item => item.classList.remove("is--active"));
            tabContentItems.forEach(content => content.classList.remove("is--active"));
            tabItems[index].classList.add("is--active");
            tabContentItems[index].classList.add("is--active");
        }
        // Add click event listeners to tab headers
        tabItems.forEach((item, index) => {
            item.addEventListener("click", () => {
                activeIndex = index;
                setActiveTab(index);
            });
        });
        // Add click event listeners to prev and next buttons
        const prevButton = tabsContainer.querySelector(".prev");
        const nextButton = tabsContainer.querySelector(".next");
        prevButton.addEventListener("click", () => {
            activeIndex = (activeIndex - 1 + tabItems.length) % tabItems.length;
            setActiveTab(activeIndex);
        });
        nextButton.addEventListener("click", () => {
            activeIndex = (activeIndex + 1) % tabItems.length;
            setActiveTab(activeIndex);
        });
        // Set the initial active tab
        setActiveTab(activeIndex);
    }
    // Initialize the tabs
    initializeTabs(tabsContainer);
});

5. Final output and Complete code:

This is how it looks:

You can find the complete code here.

6. Conclusion

In this blog post, we’ve walked through creating a simple tab navigation interface using HTML, CSS, and JavaScript. If you have any questions or feedback, feel free to leave a comment below. Happy coding!

Blog