Home
frontend tutorial
navbar template

CodeinStep

Complete Guide: Building a Responsive Navbar with Dark Mode Toggle



how to build a modern, responsive, and dark-mode-ready navbar using HTML, CSS, and Bootstrap 5

A well-designed navigation bar (navbar) is the backbone of any good website. It helps users explore different sections and improves the overall user experience. In this blog post, we’ll walk you through how to build a modern, responsive, and dark-mode-ready navbar using HTML, CSS, and Bootstrap 5.

Let’s get started! 🎉

🔍 What is a Navbar and Why Do You Need One?

A navbar (navigation bar) is like the main menu of a restaurant – it helps visitors find what they're looking for. It's typically located at the top of a webpage and links to different sections or pages.

Think of popular websites like YouTube, Facebook, or Amazon. They all have navbars that help users navigate quickly. A good navbar:

  • ✅ Improves user experience
  • ✅ Makes your site look professional
  • ✅ Increases engagement
  • ✅ Works on all screen sizes

🌟 Features of Our Navbar Template

  • 📱 Fully Responsive
  • 🌙 Dark/Light Mode Toggle
  • 💾 Saves Theme Using localStorage
  • 📋 Offcanvas Sidebar for Mobile
  • 🎨 Uses Bootstrap Icons
  • ⚡ Smooth Animations
  • 🎯 Easily Customizable with CSS Variables

🔗 Live Demo Instructions

  1. Copy the code provided below into a file named index.html
  2. Open the file in your browser
  3. Resize the window to test responsiveness
  4. Click the 🌙 button to toggle dark mode
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Clean UI</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    /* color variables start */
    :root {
      --bg-color: #f8f9fa;
      --navbar-bg: #ffffff;
      --text-color: #212529;
      --brand-color: #0d6efd;
      --nav-hover-bg: #e9ecef;
      --nav-hover-color: #0d6efd;
      --footer-color: #6c757d;
      --card-bg: #ffffff;
      --border-radius: 0.75rem;
      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .dark-mode {
      --bg-color: #121212;
      --navbar-bg: #1f1f1f;
      --text-color: #f1f1f1;
      --brand-color: #66b2ff;
      --nav-hover-bg: #2a2a2a;
      --nav-hover-color: #66b2ff;
      --footer-color: #aaaaaa;
      --card-bg: #1e1e1e;
      --box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
    }

        /* color variables end */

    /* bootstrap icon dark light icon color setup */
    
          /* Default light mode - black icon */
      .custom-toggler-icon {
        filter: invert(0%);
        transition: filter 0.3s ease;
      }

      /* Dark mode - white icon */
      .dark-mode .custom-toggler-icon {
        filter: invert(100%);
      }

    /* bootstrap icon dark light icon color setup */


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
      font-family: 'Inter', sans-serif;
      scroll-behavior: smooth;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
      height: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--text-color);
      font-weight: 600;
    }

.navbar {
  background-color: var(--navbar-bg);
  box-shadow: var(--box-shadow);
  transition: background-color 0.3s;
  padding-top: 0.01rem;
  padding-bottom: 0.01rem;
}

    .navbar-brand {
      font-weight: 700;
      color: var(--brand-color);
      text-decoration: none;
      font-size: 1.2rem;
    }

    .btn-toggle,
    .dark-toggle {
      border: none;
      background: transparent;
padding: 0.25rem 0.5rem;
      font-size: 1.3rem;
      color: var(--text-color);
      transition: transform 0.2s ease-in-out;
    }

    .btn-toggle:hover,
    .dark-toggle:hover {
      transform: scale(1.1);
    }

    .nav-link {
      font-weight: 500;
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
      padding: 0.5rem 1rem;
      border-radius: var(--border-radius);
    }

    .nav-link:hover {
      background-color: var(--nav-hover-bg);
      color: var(--nav-hover-color);
    }

    .nav-link.active {
      color: var(--brand-color);
      font-weight: 600;
    }

    .offcanvas {
      padding: 1rem;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    .sidebar-footer {
      font-size: 0.875rem;
      color: var(--footer-color);
      transition: color 0.3s;
    }

    .sidebar-footer a {
      transition: transform 0.2s;
    }

    .sidebar-footer a:hover {
      transform: scale(1.2);
    }

    .container {
      padding: 1rem;
    }

    .card-style {
      background-color: var(--card-bg);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      padding: 2rem;
      transition: background-color 0.3s;
      margin-top: 2rem;
    }
  </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar  ">
  <div class="container d-flex justify-content-between align-items-center">
    <a class="navbar-brand" href="#">Haleem Akmal</a>

    <!-- Mobile toggles -->
    <div class="d-flex align-items-center gap-2 d-lg-none">
      <button class="btn dark-toggle" type="button">
        <i class="bi bi-moon theme-icon " ></i>
      </button>
      <button class="btn-toggle" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
        <span class="navbar-toggler-icon custom-toggler-icon"></span>
      </button>
    </div>

    <!-- Desktop nav links -->
    <div class="d-none d-lg-flex align-items-center gap-4">
      <div class="d-flex gap-3">
        <a class="nav-link active" href="#">🏠 Dashboard</a>
        <a class="nav-link" href="#">🙍 About</a>
        <a class="nav-link" href="#">📁 Projects</a>
        <a class="nav-link" href="#">📧 Contact</a>
      </div>
      <button class="btn dark-toggle" type="button">
        <i class="bi bi-moon theme-icon"></i>
      </button>
    </div>
  </div>
</nav>

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start w-75" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Navigation</h5>
    <button type="button" class="btn-close custom-toggler-icon" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body d-flex flex-column justify-content-between" style="height: 87vh;">
    <div>
      <ul class="nav flex-column">
        <li class="nav-item"><a class="nav-link active" href="#">🏠 Dashboard</a></li>
        <li class="nav-item"><a class="nav-link" href="#">🙍 About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">📁 Projects</a></li>
        <li class="nav-item"><a class="nav-link" href="#">📧 Contact</a></li>
      </ul>
    </div>
    <div class="sidebar-footer text-center mt-4">
      <p class="mb-0 d-flex justify-content-center gap-2 align-items-center">
        <a href="https://wa.me/1234567890" target="_blank" class="text-success fs-2" aria-label="WhatsApp"><i class="bi bi-whatsapp"></i></a>
        <a href="https://facebook.com/yourusername" target="_blank" class="text-primary fs-2" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
        <a href="https://www.linkedin.com/in/yourusername" target="_blank" class="text-primary fs-2" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
        <a href="https://www.instagram.com/yourusername" target="_blank" class="text-danger fs-2" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
        <a href="https://github.com/yourusername" target="_blank" class="text-dark fs-2" aria-label="GitHub"><i class="bi bi-github"></i></a>
      </p>
      <p class="mb-0">© 2025 Haleem Akmal</p>
    </div>
  </div>
</div>

<!-- Page Content -->
<div class="container">
  <div class="card-style">
    <h1>Hello World</h1>
    <p>Welcome to my modern responsive website with dark and light mode!</p>
  </div>
</div>

<!-- Theme Toggle Script -->
<script>
  const body = document.body;
  const iconElements = document.querySelectorAll('.theme-icon');

  if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-mode');
    iconElements.forEach(icon => icon.className = 'bi bi-sun theme-icon');
  }

  document.querySelectorAll('.dark-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      body.classList.toggle('dark-mode');
      const isDark = body.classList.contains('dark-mode');
      localStorage.setItem('theme', isDark ? 'dark' : 'light');
      iconElements.forEach(icon => {
        icon.className = isDark ? 'bi bi-sun theme-icon' : 'bi bi-moon theme-icon';
      });
    });
  });
</script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🧱 Code Breakdown

1. HTML Structure

The navbar includes:

  • <nav> – for main navigation
  • <div class="offcanvas"> – for mobile sidebar
  • <div class="container"> – for main content

2. CSS Variables

:root {
  --bg-color: #f8f9fa;
  --navbar-bg: #ffffff;
  ...
}
.dark-mode {
  --bg-color: #121212;
  ...
}

3. Responsive Layout (Bootstrap)

Bootstrap classes like d-none d-lg-flex and d-lg-none are used to show/hide content based on screen size.

4. Dark Mode Toggle

// Check saved theme
if (localStorage.getItem('theme') === 'dark') {
  body.classList.add('dark-mode');
}
// Toggle theme on click
button.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

5. Bootstrap CDN Links

Make sure to include these in your HTML:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

⚙️ How to Use This Navbar in Your Project

  1. Create a new file index.html
  2. Paste the full code into it (see our GitHub/Gist link or scroll down)
  3. Open in browser, test responsiveness and dark mode
  4. Copy individual sections into your project if needed

🛠️ Customization Tips

  • 🎨 Colors: Change CSS variables in :root and .dark-mode
  • 🔤 Brand Name: Change Haleem Akmal to your own
  • 🔗 Links: Add or remove <a class="nav-link">
  • 📱 Sidebar Width: Change w-75 to w-50 or w-100

💡 Beginner FAQs

Does this navbar work on mobile?

Yes! The offcanvas sidebar gives a smooth experience on phones.

How can I change the theme colors?

Edit the CSS variables inside :root and .dark-mode sections.

Do I need JavaScript libraries?

No, it works with plain JS and Bootstrap 5 only.

📚 Next Steps: Grow Your Skills

  • 🔎 Add dropdown menus
  • 🔍 Add search bar in navbar
  • 🧭 Make the navbar sticky
  • 🔐 Add login/signup buttons

✅ Conclusion

Congrats! You've learned how to build a responsive, mobile-friendly navbar with dark mode support. This component is perfect for portfolios, landing pages, or any beginner web project.

Key concepts learned:

  • ✅ Bootstrap 5 classes
  • ✅ CSS Variables
  • ✅ JavaScript localStorage
  • ✅ Responsive design thinking

🎁 Want more templates? Visit my blog or follow me on GitHub for more beginner-friendly UI components.




Post a Comment