DocsAllOver Interactive CSS Navigation Menu with Tab Indicators Snippets

Interactive CSS Navigation Menu with Tab Indicators

July 26, 2025

CSS, Clean UI, Animation, Navbar

Full Screen

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Interactive CSS Navigation Menu with Tab Indicators</title>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
   </head>
<body>
  <div class="container">
    <input type="radio" name="s" id="home" checked>
    <input type="radio" name="s" id="blog">
    <input type="radio" name="s" id="code">
    <input type="radio" name="s" id="help">
    <input type="radio" name="s" id="about">
    <nav>
      <div class="slider"></div>
      <label class="home" for="home">
      <i class="fas fa-home"></i>Home
      </label>
      <label class="blog" for="blog">
      <i class="fas fa-blog"></i>About
      </label>
      <label class="code" for="code">
        <i class="fas fa-code"></i>Projects
      </label>
      <label class="help" for="help">
        <i class="fas fa-envelope"></i>Help
      </label>
      <label class="about" for="about">
        <i class="fas fa-user"></i>Contact
      </label>
    </nav>
  </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
}

nav {
    width: 600px;
    height: 60px;
    border-radius: 5px;
    display: flex;
    text-align: center;
    position: relative;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

nav label {
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 5px;
    margin: 0 5px;
    color: #0d6efd;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

nav label:hover {
    background: #a1c6ff;
}

nav label i {
    margin-right: 4px;
}

nav .slider {
    position: absolute;
    height: 100%;
    width: 20%;
    background: #0d6efd;
    left: 0;
    top: 0;
    border-radius: 5px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
}

#home:checked~nav label.home,
#blog:checked~nav label.blog,
#code:checked~nav label.code,
#help:checked~nav label.help,
#about:checked~nav label.about {
    color: #fff;
}

#blog:checked~nav .slider {
    left: 20%;
}

#code:checked~nav .slider {
    left: 40%;
}

#help:checked~nav .slider {
    left: 60%;
}

#about:checked~nav .slider {
    left: 80%;
}

input[type=radio] {
    display: none;
}

//Doesn't require any JS.

This CSS snippet showcases a clean, responsive, and interactive navigation menu featuring dynamic tab indicators. It provides an elegant way to highlight the currently active menu item, enhancing the user experience with clear visual feedback, all achieved purely with CSS.

Key Features:

Responsive Design: The navigation menu adapts seamlessly to different screen sizes, ensuring optimal viewing and interaction on desktops, tablets, and mobile devices.
CSS-Only Implementation: Achieves all animation and indicator functionality purely with CSS, reducing dependencies and improving performance.
Customizable Styling: Easily modify the appearance of the navigation items, indicator, colors, and transition effects using standard CSS properties to match your website's design.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the navigation menu, including a container for the menu items and a separate element for the indicator.
Apply CSS Styles: Use CSS to style the navigation bar, its individual items, and the indicator. Crucially, apply transition properties to the indicator element to enable smooth movement.
Implement CSS Selectors: Use CSS pseudo-classes (like :hover or :active where applicable) or class changes (managed by a minimal amount of JavaScript if dynamic state is needed) to control the position and appearance of the indicator based on the active menu item.
Define Indicator Movement: Use CSS transform properties (e.g., translateX) to move the indicator to the position of the active menu item, ensuring a smooth visual transition.

By following these steps, you can create a fully responsive and visually engaging navigation menu with dynamic tab indicators, enhancing user interaction and clarity on your website using only CSS.

Latest Snippets

View All