Create Modern Navbar using Bootstrap 5 and JavaScript

Faraz

By Faraz -

Learn how to create a modern responsive navbar using HTML, Bootstrap 5, and JavaScript with simple steps. Perfect for beginners in web development.

Join us on Telegram
create-modern-navbar-using-bootstrap-5-and-javascript.webp
Read Alsocreating a unique neubrutalism portfolio page with html, css, and javascript.jpgCreating a Unique Neobrutalism Portfolio Page with HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A navbar (navigation bar) is a key part of any website. It helps users move between pages quickly and easily. In this blog, you’ll learn how to create a modern and responsive navbar using HTML, CSS (Bootstrap 5), and JavaScript.

This guide is great for beginners who want to build their own websites or improve their frontend skills.

Prerequisites Before You Start

Make sure you have these before following the tutorial:

  • Basic understanding of HTML, CSS, and JavaScript
  • A code editor like VS Code
  • Internet connection to use Bootstrap 5 CDN
  • A modern browser (like Chrome)

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our navbar. Here's a detailed breakdown of what each part does:

<!DOCTYPE html>

  • Declares the document type and version as HTML5.

<html lang="en">

  • The root element of the HTML document with the language set to English.

<head> Section

Contains metadata and links to external resources:

  • <meta charset="UTF-8">: Sets character encoding to UTF-8.
  • <meta name="viewport"...>: Ensures responsive layout on all devices.
  • <title>: Sets the browser tab title to Modern Navbar - HTML CSS JS.
  • Bootstrap CSS: Imported via CDN for layout and component styles.
  • Google Fonts (Inter): Used for custom typography.
  • Font Awesome: For icons like login, search, etc.
  • Custom Styles (styles.css): External stylesheet for custom design.

<body> Section

<nav> Tag

Creates a responsive Bootstrap navigation bar with the class navbar-custom (styled in styles.css).

Inside the navbar:

Brand Logo:

<a class="navbar-brand" href="#"><i class="fas fa-gavel me-2"></i>CWF</a>
  • Shows a gavel icon (fa-gavel) and text "CWF".

Toggler Button (for mobile):

<button class="navbar-toggler" ...>

Collapses or expands the navbar on smaller screens.

Collapsible Navbar Content (id="navbarSupportedContent"):

  • Wrapped inside Bootstrap's collapsible component.

Search Form Section:

<div class="search-form-wrapper mx-lg-auto my-2 my-lg-0">
  • A search bar with a search icon.
  • An "Advanced Search" link.
  • Uses responsive classes (d-flex, flex-column, flex-lg-row) for layout on different screen sizes.

Navigation Buttons:

An unordered list (<ul class="navbar-nav">) with the following buttons:

Login Button:

<button class="btn btn-login"><i class="fas fa-sign-in-alt"></i>Login</button>

Free Registration:

<button class="btn btn-free-registration"><i class="fas fa-user-plus"></i>Free Registration</button>

Subscribe:

<button class="btn btn-subscribe"><i class="fas fa-star"></i>Subscribe</button>

My Account and Logout:

<li class="nav-item d-none" id="navMyAccount">...</li>
<li class="nav-item d-none" id="navLogout">...</li>
  • Initially hidden (d-none class), shown only when the user is logged in (via JavaScript).

Scripts at the Bottom:

  • Bootstrap JS Bundle: Enables navbar toggling and other interactivity.
  • script.js: Custom JavaScript to manage dynamic behavior (like login/logout visibility).
Read AlsoCreate a Stunning Bakery Shop Landing Page HTML, CSS, JavaScript.jpgCreate a Stunning Bakery Shop Landing Page | HTML, CSS, JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the navbar is in place, the next step is to add styling to the navbar using CSS. Here's a breakdown section by section:

body

body {
  font-family: 'Inter', sans-serif;
  background-color: #e9ecef;
}
  • Font: Uses the "Inter" font for cleaner text.
  • Background color: Light gray-blue for a subtle page background.

.navbar-custom

.navbar-custom {
  background: linear-gradient(...);
  box-shadow: ...;
  padding: ...;
  transition: ...;
}
  • Gradient background: A smooth color transition from dark blue to light blue.
  • Shadow: Adds depth below the navbar.
  • Padding: Adds space above and below the content inside navbar.
  • Smooth transitions: Animates any changes (like hover effects) nicely.

.navbar-brand

.navbar-custom .navbar-brand {
  font-size, color, spacing, etc.
}
  • Logo or site name styling: Bold, white, and slightly larger.
  • Hover effect: Lightens color and slightly enlarges the text.

Search Bar Section

.search-form-wrapper 
flex-grow: 1;
display: flex;
justify-content: center;
  • Ensures the search bar stretches and is centered in the navbar.
.search-form 
display: flex; background-color: rgba(255,255,255,0.15); border-radius: 50px;
  • Rounded search bar with a semi-transparent white background.
  • Grows a little lighter when focused (thanks to :focus-within).
.form-control
  • Transparent background; white text; no borders.
.btn-search
  • White circular search button with blue icon; scales up on hover.
.advanced-search-link
  • A small link next to the search bar.
  • White text with a soft glow effect on hover.

Navbar Buttons

Common styles:

.navbar-custom .nav-item .btn {
  Rounded; padding; transition; icon support.
}

Variants:

  • .btn-login: Transparent with white border; subtle hover effect.
  • .btn-subscribe: Bright gold/yellow; grows and glows on hover.
  • .btn-free-registration: White with blue text; darkens text on hover.
  • .btn-my-account: Similar to login; transparent white style.
  • .btn-logout: Red button with stronger hover effect.

Hamburger Menu (mobile toggle)

.navbar-toggler, .navbar-toggler-icon
  • White-bordered menu icon using an inline SVG image.
  • Glows slightly when focused (accessibility improvement).

Responsive Styles (For smaller screens < 992px)

@media (max-width: 991.98px) { ... }
  • Search bar gets more spacing and becomes easier to tap.
  • Advanced search link is centered and stacked.
  • Navbar buttons become full-width, stacked vertically, and centered.
body {
  font-family: 'Inter', sans-serif;
  background-color: #e9ecef; 
}

.navbar-custom {
  background: linear-gradient(90deg, #0052d4 0%, #4364f7 50%, #6fb1fc 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  transition: all 0.3s ease-in-out;
}

.navbar-custom .navbar-brand {
  font-size: 1.85rem; 
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.25px;
  transition: transform 0.2s ease-out;
}

.navbar-custom .navbar-brand:hover {
  color: #f0f0f0;
  transform: scale(1.03); 
}

/* Search Bar Styling */
.search-form-wrapper {
  flex-grow: 1; 
  display: flex;
  justify-content: center; 
}

.search-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px; 
  background-color: rgba(255, 255, 255, 0.15); 
  border-radius: 50px; 
  padding: 0.25rem 0.25rem 0.25rem 1rem; 
  transition: background-color 0.3s ease;
}
.search-form:focus-within {
  background-color: rgba(255, 255, 255, 0.25); 
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}

.search-form .form-control {
  background-color: transparent;
  border: none;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  box-shadow: none; 
}

.search-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-form .btn-search {
  background-color: #ffffff; 
  color: #0052d4; 
  border-radius: 50%; 
  padding: 0.5rem;
  width: 41px;
  height: 38px; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  border: none;
}

.search-form .btn-search:hover {
  background-color: #f0f0f0;
  transform: scale(1.1);
}

.advanced-search-link {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-left: 0.75rem;
  white-space: nowrap;
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease;
}

.advanced-search-link:hover {
  color: #ffffff;
  text-decoration: none; 
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Navbar Buttons Styling */
.navbar-custom .nav-item .btn {
  font-size: 0.85rem; 
  font-weight: 600; 
  padding: 0.6rem 1.1rem; 
  border-radius: 50px;
  margin-left: 0.6rem;
  transition: all 0.25s ease-in-out;
  border: 1px solid transparent; 
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.navbar-custom .nav-item .btn i {
  margin-right: 0.5em; /* Space between icon and text */
}

.btn-login {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.btn-login:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-subscribe {
  background-color: #ffd700; 
  color: #333333; 
  border-color: #ffd700;
}
.btn-subscribe:hover {
  background-color: #ffc107; 
  border-color: #ffc107;
  color: #000000;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.btn-free-registration {
  background-color: #ffffff; 
  color: #0052d4; 
  border-color: #ffffff;
}
.btn-free-registration:hover {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
  color: #003d99;
  transform: translateY(-2px);
}

.btn-my-account {
  /* Style for My Account button */
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.btn-my-account:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-logout {
  /* Style for Logout button */
  background-color: #dc3545; 
  color: #ffffff;
  border-color: #dc3545;
}
.btn-logout:hover {
  background-color: #c82333;
  border-color: #bd2130;
  transform: translateY(-2px);
}

/* Hamburger Menu Icon Styling */
.navbar-custom .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}
.navbar-custom .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}

.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
  /* Bootstrap's lg breakpoint */
  .search-form-wrapper {
    padding: 0 0.5rem; 
  }
  .search-form {
    max-width: none;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    background-color: rgba(
      255,
      255,
      255,
      0.2
    ); 
  }
  .advanced-search-link {
    display: block;
    margin-left: 0;
    margin-top: 0.5rem;
    text-align: center;
    padding: 0.5rem 0;
    color: #ffffff;
  }
  .navbar-custom .navbar-nav {
    align-items: stretch; 
    padding-top: 0.5rem;
  }
  .navbar-custom .nav-item .btn {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.75rem;
    justify-content: center; 
  }
  .navbar-custom .nav-item:last-child .btn {
    margin-bottom: 0.25rem; 
  }
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. Here's a detailed explanation, broken down step by step:

1. Variables & DOM Elements

let isUserLoggedIn = false;
  • This variable tracks the user's login state. It starts as false (i.e., the user is not logged in).
const navLogin = document.getElementById('navLogin');
const navFreeRegistration = document.getElementById('navFreeRegistration');
const navSubscribe = document.getElementById('navSubscribe');
const navMyAccount = document.getElementById('navMyAccount');
const navLogout = document.getElementById('navLogout');
  • These constants store references to navbar elements like Login, Free Registration, Subscribe, My Account, and Logout.

2. Function: updateNavbarForLoginState()

function updateNavbarForLoginState() {
  if (isUserLoggedIn) {
    navLogin.classList.add('d-none');
    navFreeRegistration.classList.add('d-none');

    navMyAccount.classList.remove('d-none');
    navLogout.classList.remove('d-none');
  } else {
    navLogin.classList.remove('d-none');
    navFreeRegistration.classList.remove('d-none');

    navMyAccount.classList.add('d-none');
    navLogout.classList.add('d-none');
  }
}
  • This function shows or hides navbar items based on the login state:
    • If logged in: Show My Account and Logout, hide Login and Free Registration.
    • If logged out: Show Login and Free Registration, hide My Account and Logout.

3. Login Button Click Event

if (navLogin) {
  navLogin.querySelector('button').addEventListener('click', () => {
    isUserLoggedIn = true;
    updateNavbarForLoginState();
    console.log('User logged in (simulated)');
  });
}
  • When the Login button is clicked, it simulates a user login:
    • Sets isUserLoggedIn to true.
    • Updates the navbar.
    • Logs the action to the console.

4. Logout Button Click Event

if (navLogout) {
  navLogout.querySelector('button').addEventListener('click', () => {
    isUserLoggedIn = false;
    updateNavbarForLoginState();
    console.log('User logged out (simulated)');
  });
}
  • When the Logout button is clicked, it simulates a user logout:
    • Sets isUserLoggedIn to false.
    • Updates the navbar.
    • Logs the action to the console.

5. DOMContentLoaded Event (Initial Setup)

document.addEventListener('DOMContentLoaded', () => {
  updateNavbarForLoginState();
  • Runs as soon as the HTML page is fully loaded.
  • Calls updateNavbarForLoginState() to set the correct button visibility initially.

6. Demo: Toggle Login State Button

const toggleLoginButton = document.createElement('button');
  toggleLoginButton.textContent = 'Toggle Login State (Demo)';
  toggleLoginButton.classList.add('btn', 'btn-info', 'position-fixed', 'bottom-0', 'end-0', 'm-3');
  toggleLoginButton.style.zIndex = '1050';
  toggleLoginButton.onclick = () => {
    isUserLoggedIn = !isUserLoggedIn;
    updateNavbarForLoginState();
    console.log('Login state toggled. Logged in: ' + isUserLoggedIn);
  };
  document.body.appendChild(toggleLoginButton);
  • Adds a demo button to the bottom-right of the page to toggle login state manually (for testing).
  • This is useful during development to simulate logging in/out without a backend.

7. Final Console Log

console.log('Navbar script loaded. Initial login state: ' + isUserLoggedIn);
  • Confirms that the script is loaded and logs the initial login state.
let isUserLoggedIn = false;

const navLogin = document.getElementById('navLogin');
const navFreeRegistration = document.getElementById('navFreeRegistration');
const navSubscribe = document.getElementById('navSubscribe'); 
const navMyAccount = document.getElementById('navMyAccount');
const navLogout = document.getElementById('navLogout');

// Function to update the navbar based on login state
function updateNavbarForLoginState() {
  if (isUserLoggedIn) {
    // User is logged in: Show My Account & Logout, Hide Login & Free Registration
    navLogin.classList.add('d-none');
    navFreeRegistration.classList.add('d-none');

    navMyAccount.classList.remove('d-none');
    navLogout.classList.remove('d-none');
  } else {
    // User is logged out: Show Login & Free Registration, Hide My Account & Logout
    navLogin.classList.remove('d-none');
    navFreeRegistration.classList.remove('d-none');

    navMyAccount.classList.add('d-none');
    navLogout.classList.add('d-none');
  }
}

// --- Event Listeners for Login/Logout (Simulation) ---
if (navLogin) {
  navLogin.querySelector('button').addEventListener('click', () => {
    isUserLoggedIn = true;
    updateNavbarForLoginState();
    console.log('User logged in (simulated)');
    // In a real app, this would likely redirect to a login page or open a modal
  });
}

if (navLogout) {
  navLogout.querySelector('button').addEventListener('click', () => {
    isUserLoggedIn = false;
    updateNavbarForLoginState();
    console.log('User logged out (simulated)');
    // In a real app, this would clear session/token and redirect
  });
}

// --- Initial setup on page load ---
document.addEventListener('DOMContentLoaded', () => {
  updateNavbarForLoginState(); // Set initial button visibility

  // For demonstration: A button to toggle login state
  const toggleLoginButton = document.createElement('button');
  toggleLoginButton.textContent = 'Toggle Login State (Demo)';
  toggleLoginButton.classList.add(
    'btn',
    'btn-info',
    'position-fixed',
    'bottom-0',
    'end-0',
    'm-3'
  );
  toggleLoginButton.style.zIndex = '1050'; 
  toggleLoginButton.onclick = () => {
    isUserLoggedIn = !isUserLoggedIn;
    updateNavbarForLoginState();
    console.log('Login state toggled. Logged in: ' + isUserLoggedIn);
  };
  document.body.appendChild(toggleLoginButton);
  console.log('Navbar script loaded. Initial login state: ' + isUserLoggedIn);
});

Final Output:

create-modern-navbar-using-bootstrap-5-and-javascript.gif
Read Alsohow-to-create-mega-menu-navbar-using-html-css-and-javascript.webpHow to Create Mega Menu Navbar Using HTML, CSS & JavaScript

Conclusion:

You’ve now built a clean and modern responsive navbar using HTML, CSS (Bootstrap 5), and a little JavaScript. This type of navbar is used in almost all modern websites. You can customize colors, links, and styles as needed.

By following these easy steps, you’ve improved your frontend web development skills and created a key component of any professional website.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: navbar, bootstrap navbar, html css navbar, javascript navbar, how to create a modern navbar using bootstrap 5, responsive navbar with html;css; and javascript, step-by-step modern navigation bar tutorial, create responsive menu bar using bootstrap and js
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺