Sticky Navbar

A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

This tailwind example is contributed by JUGENDRA GANGWAR, on 26-Jun-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are drawer,find

Header Sidebar Navigations Search Bar Dropdown Navbar

Author JUGENDRA GANGWAR

Tailwind v3.4 157 5

Fork Fullscreen

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML , CSS & JavaScript Responsive Navigation Bar</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

</head>

<body>
    <div class="top-header">
      <div class="top-header-content">
        <div class="contact-info">
          <span>
            <i class="fa-solid fa-phone-flip"></i>
            <a href="tel:+919627064810" class="text-white">+91 9627064810</a>
          </span>
          <span>
            <i class="fa-solid fa-phone-flip"></i>
            <a href="tel:+919990503885" class="text-white">+91 9990503885</a>
          </span>
          <span>
            <i class="fa-solid fa-envelope"></i>
            <a href="mailto:sales@vrdlegal.com" class="text-white"
              >sales@vrdlegal.com</a
            >
          </span>
        </div>
        <div class="top-social">
          <a href="" target="_blank" aria-label="Facebook"
            ><i class="fab fa-facebook"></i
          ></a>
          <a href="" target="_blank" aria-label="X (Twitter)"
            ><i class="fab fa-x-twitter"></i
          ></a>
          <a href="" target="_blank" aria-label="LinkedIn"
            ><i class="fab fa-linkedin-in"></i
          ></a>
          <a href="" target="_blank" aria-label="YouTube"
            ><i class="fab fa-youtube"></i
          ></a>
        </div>
      </div>
    </div>

<header>
      <nav class="nav-row-1">
        <div class="nav-row-1-inner">
          <a class="logo nav-text-logo" href="index.php">
            <span class="nav-logo-vrd">Brand</span><span class="nav-logo-legal">Logo</span>
          </a>

<div class="nav-right">
            <a href="contact.php" class="btn-contact-nav">Contact Us</a>
            <a href="login.php" class="btn-login" id="desktopLoginBtn">Login</a>
            <a
              href="account-addresses.php"
              class="btn-login"
              id="desktopDashboardBtn"
              style="display: none"
              >Dashboard</a
            >
          </div>

<nav class="nav-row-2">
        <div class="nav-row-2-inner">
          <div class="desktop-nav">
            <div class="nav-item" id="ni-consult">
              <button class="nav-trigger">
                Consult an Expert
                <svg viewBox="0 0 10 6" fill="none">
                  <path
                    d="M1 1l4 4 4-4"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                </svg>
              </button>
              <div class="dropdown narrow">
                <div class="simple-drop">
                  <a href="contact.php">Talk to a Lawyer</a>
                  <a href="contact.php">Talk to a CA</a>
                  <a href="contact.php">Talk to a Trademark Lawyer</a>
                  <a href="contact.php">Talk to a Company Secretary</a>
                </div>
              </div>
            </div>
            <div class="nav-item" id="ni-business">
              <button class="nav-trigger">
                Business Registration
                <svg viewBox="0 0 10 6" fill="none">
                  <path
                    d="M1 1l4 4 4-4"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                </svg>
              </button>
              <div class="dropdown">
                <div class="drop-panel">
                  <div class="drop-tabs" id="tabs-business">
                    <div class="drop-tab active" data-tab="company-reg">
                      Company Registration
                    </div>
                    <div class="drop-tab" data-tab="intl-business">
                      International Setup
                    </div>
                    <div class="drop-tab" data-tab="licenses">
                      Licenses &amp; Registrations
                    </div>
                  </div>
                  <div class="drop-content">
                    <div class="drop-section active" id="company-reg">
                      <div class="link-group">
                        <div class="link-group-title">Company Types</div>
                        <a class="drop-link" href="service-detail.php"
                          >Private Limited Company</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Limited Liability Partnership</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >One Person Company</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Sole Proprietorship</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Nidhi Company</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Partnership Firm</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Startup India</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="intl-business">
                      <div class="link-group">
                        <div class="link-group-title">International Setup</div>
                        <a class="drop-link" href="service-detail.php"
                          >USA Company Setup</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Singapore Company</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >UK Company</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Dubai Freezone</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="licenses">
                      <div class="link-group">
                        <div class="link-group-title">Licenses</div>
                        <a class="drop-link" href="service-detail.php"
                          >FSSAI License</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Import Export Code</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Drug License</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Trade License</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-item" id="ni-tax">
              <button class="nav-trigger">
                Tax &amp; Compliance
                <svg viewBox="0 0 10 6" fill="none">
                  <path
                    d="M1 1l4 4 4-4"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                </svg>
              </button>
              <div class="dropdown">
                <div class="drop-panel">
                  <div class="drop-tabs" id="tabs-tax">
                    <div class="drop-tab active" data-tab="gst">
                      GST &amp; Indirect Tax
                    </div>
                    <div class="drop-tab" data-tab="annual">Annual Filings</div>
                    <div class="drop-tab" data-tab="labour">
                      Labour Compliance
                    </div>
                    <div class="drop-tab" data-tab="accounting">
                      Accounting &amp; Tax
                    </div>
                  </div>
                  <div class="drop-content">
                    <div class="drop-section active" id="gst">
                      <div class="link-group">
                        <div class="link-group-title">GST Services</div>
                        <a class="drop-link" href="service-detail.php"
                          >GST Registration</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >GST Return Filing</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >GST Annual Return</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >GST Cancellation</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="annual">
                      <div class="link-group">
                        <div class="link-group-title">Annual Filings</div>
                        <a class="drop-link" href="service-detail.php"
                          >ROC Annual Filing</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Income Tax Return</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Director KYC</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >DIN eKYC</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="labour">
                      <div class="link-group">
                        <div class="link-group-title">Labour Compliance</div>
                        <a class="drop-link" href="service-detail.php"
                          >Provident Fund (PF)</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >ESI Registration</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Professional Tax</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Shops &amp; Establishments</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >POSH Compliance</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="accounting">
                      <div class="link-group">
                        <div class="link-group-title">Accounting</div>
                        <a class="drop-link" href="service-detail.php"
                          >Bookkeeping</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Payroll Management</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >TDS Filing</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Balance Sheet</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-item" id="ni-trademark">
              <button class="nav-trigger">
                Trademark &amp; IP
                <svg viewBox="0 0 10 6" fill="none">
                  <path
                    d="M1 1l4 4 4-4"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                </svg>
              </button>
              <div class="dropdown">
                <div class="drop-panel">
                  <div class="drop-tabs" id="tabs-trademark">
                    <div class="drop-tab active" data-tab="tm">Trademark</div>
                    <div class="drop-tab" data-tab="copyright">Copyright</div>
                    <div class="drop-tab" data-tab="patent">Patent</div>
                    <div class="drop-tab" data-tab="design-reg">
                      Design Registration
                    </div>
                  </div>
                  <div class="drop-content">
                    <div class="drop-section active" id="tm">
                      <div class="link-group">
                        <div class="link-group-title">Trademark</div>
                        <a class="drop-link" href="service-detail.php"
                          >Trademark Registration</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Trademark Search</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Respond to TM Objection</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Trademark Renewal</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >USA Trademark</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="copyright">
                      <div class="link-group">
                        <div class="link-group-title">Copyright</div>
                        <a class="drop-link" href="service-detail.php"
                          >Copyright Registration</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Copyright Objection</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="patent">
                      <div class="link-group">
                        <div class="link-group-title">Patent</div>
                        <a class="drop-link" href="service-detail.php"
                          >Patent Registration</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Patent Search</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Provisional Application</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="design-reg">
                      <div class="link-group">
                        <div class="link-group-title">Design</div>
                        <a class="drop-link" href="service-detail.php"
                          >Design Registration</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Design Objection</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

<div class="nav-item" id="ni-lawyer">
              <button class="nav-trigger">
                Lawyer Services
                <svg viewBox="0 0 10 6" fill="none">
                  <path
                    d="M1 1l4 4 4-4"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                  />
                </svg>
              </button>
              <div class="dropdown">
                <div class="drop-panel">
                  <div class="drop-tabs" id="tabs-lawyer">
                    <div class="drop-tab active" data-tab="specialization">
                      Specialization
                    </div>
                    <div class="drop-tab" data-tab="notices">Legal Notice</div>
                    <div class="drop-tab" data-tab="litigation">Litigation</div>
                  </div>
                  <div class="drop-content">
                    <div class="drop-section active" id="specialization">
                      <div class="link-group">
                        <div class="link-group-title">Specializations</div>
                        <a class="drop-link" href="service-detail.php"
                          >Finance Lawyers</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Civil Lawyers</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Corporate Lawyers</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Criminal Lawyers</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Property Lawyers</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Divorce Lawyers</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Cyber Crime Lawyers</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="notices">
                      <div class="link-group">
                        <div class="link-group-title">Legal Notices</div>
                        <a class="drop-link" href="service-detail.php"
                          >Send Legal Notice</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Reply to Legal Notice</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Demand Notice</a
                        >
                      </div>
                    </div>
                    <div class="drop-section" id="litigation">
                      <div class="link-group">
                        <div class="link-group-title">Litigation</div>
                        <a class="drop-link" href="service-detail.php"
                          >Civil Litigation</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Criminal Litigation</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Consumer Forum</a
                        >
                        <a class="drop-link" href="service-detail.php"
                          >Arbitration</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>

<div class="mob-section">
        <button class="mob-toggle">
          Consult an Expert
          <svg viewBox="0 0 10 6" fill="none">
            <path
              d="M1 1l4 4 4-4"
              stroke="#022B50"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div class="mob-links">
          <a href="contact.php">Talk to a Lawyer</a>
          <a href="contact.php">Talk to a CA</a>
          <a href="contact.php">Talk to a Trademark Lawyer</a>
          <a href="contact.php">Talk to a Company Secretary</a>
        </div>
      </div>

<div class="mob-section">
        <button class="mob-toggle">
          Business Registration
          <svg viewBox="0 0 10 6" fill="none">
            <path
              d="M1 1l4 4 4-4"
              stroke="#022B50"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div class="mob-links">
          <div class="mob-child-group">
            <button class="mob-child-toggle">
              Company Types
              <svg viewBox="0 0 10 6" fill="none">
                <path
                  d="M1 1l4 4 4-4"
                  stroke="#022B50"
                  stroke-width="1.8"
                  stroke-linecap="round"
                />
              </svg>
            </button>
            <div class="mob-child-links">
              <a href="service-detail.php">Private Limited Company</a>
              <a href="service-detail.php">Limited Liability Partnership</a>
              <a href="service-detail.php">One Person Company</a>
              <a href="service-detail.php">Sole Proprietorship</a>
              <a href="service-detail.php">Startup India</a>
            </div>
          </div>
          <div class="mob-child-group">
            <button class="mob-child-toggle">
              International Setup
              <svg viewBox="0 0 10 6" fill="none">
                <path
                  d="M1 1l4 4 4-4"
                  stroke="#022B50"
                  stroke-width="1.8"
                  stroke-linecap="round"
                />
              </svg>
            </button>
            <div class="mob-child-links">
              <a href="service-detail.php">USA Company Setup</a>
              <a href="service-detail.php">Singapore Company</a>
              <a href="service-detail.php">UK Company</a>
              <a href="service-detail.php">Dubai Freezone</a>
            </div>
          </div>
          <div class="mob-child-group">
            <button class="mob-child-toggle">
              Licenses &amp; Registrations
              <svg viewBox="0 0 10 6" fill="none">
                <path
                  d="M1 1l4 4 4-4"
                  stroke="#022B50"
                  stroke-width="1.8"
                  stroke-linecap="round"
                />
              </svg>
            </button>
            <div class="mob-child-links">
              <a href="service-detail.php">FSSAI License</a>
              <a href="service-detail.php">Import Export Code</a>
              <a href="service-detail.php">Drug License</a>
              <a href="service-detail.php">Trade License</a>
            </div>
          </div>
        </div>
      </div>

<div class="mob-section">
        <button class="mob-toggle">
          Tax &amp; Compliance
          <svg viewBox="0 0 10 6" fill="none">
            <path
              d="M1 1l4 4 4-4"
              stroke="#022B50"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div class="mob-links">
          <a href="service-detail.php">GST Registration</a>
          <a href="service-detail.php">Income Tax Return</a>
          <a href="service-detail.php">Provident Fund (PF)</a>
          <a href="service-detail.php">Professional Tax</a>
        </div>
      </div>

<div class="mob-section">
        <button class="mob-toggle">
          Trademark &amp; IP
          <svg viewBox="0 0 10 6" fill="none">
            <path
              d="M1 1l4 4 4-4"
              stroke="#022B50"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div class="mob-links">
          <a href="service-detail.php">Trademark Registration</a>
          <a href="service-detail.php">Trademark Search</a>
          <a href="service-detail.php">Trademark Renewal</a>
        </div>
      </div>

<div class="mob-section">
        <button class="mob-toggle">
          Lawyer Services
          <svg viewBox="0 0 10 6" fill="none">
            <path
              d="M1 1l4 4 4-4"
              stroke="#022B50"
              stroke-width="1.8"
              stroke-linecap="round"
            />
          </svg>
        </button>
        <div class="mob-links">
          <a href="service-detail.php">Civil Lawyers</a>
          <a href="service-detail.php">Corporate Lawyers</a>
          <a href="service-detail.php">Divorce Lawyers</a>
          <a href="service-detail.php">Recovery Lawyers</a>
        </div>
      </div>

<div class="mob-bottom">
        <a href="login.php" class="btn btn--navy" id="mobLoginBtn">Login</a>
        <a
          href="account-addresses.php"
          class="btn btn--navy"
          id="mobDashboardBtn"
          style="display: none"
          >Dashboard</a
        >
        <a href="contact.php" class="btn btn--ghost">Contact Us</a>
      </div>

<div class="demo-content">
      <p>
        ↑ Navbar Component Preview — Scroll and resize to test responsiveness
      </p>
    </div>

/* ── Hamburger / Drawer ── */
        const hamburger = document.getElementById("hamburger");
        const mobileDrawer = document.getElementById("mobileDrawer");
        const drawerClose = document.getElementById("mobileDrawerClose");
        const backdrop = document.getElementById("drawerBackdrop");

function openDrawer() {
          mobileDrawer.classList.add("is-open");
          backdrop.classList.add("is-visible");
          hamburger.classList.add("is-open");
          document.body.style.overflow = "hidden";
          mobileDrawer.setAttribute("aria-hidden", "false");
        }

function closeDrawer() {
          mobileDrawer.classList.remove("is-open");
          backdrop.classList.remove("is-visible");
          hamburger.classList.remove("is-open");
          document.body.style.overflow = "";
          mobileDrawer.setAttribute("aria-hidden", "true");
        }

hamburger.addEventListener("click", openDrawer);
        drawerClose.addEventListener("click", closeDrawer);
        backdrop.addEventListener("click", closeDrawer);

document.addEventListener("keydown", function (e) {
          if (e.key === "Escape") closeDrawer();
        });

document.querySelectorAll(".mob-toggle").forEach(function (btn) {
          btn.addEventListener("click", function () {
            const links = btn.nextElementSibling;
            const isOpen = links.classList.contains("is-open");

document
              .querySelectorAll(".mob-links.is-open")
              .forEach(function (el) {
                el.classList.remove("is-open");
              });
            document
              .querySelectorAll(".mob-toggle.is-open")
              .forEach(function (el) {
                el.classList.remove("is-open");
              });

if (!isOpen) {
              links.classList.add("is-open");
              btn.classList.add("is-open");
            }
          });
        });

document.querySelectorAll(".mob-child-toggle").forEach(function (btn) {
          btn.addEventListener("click", function () {
            const links = btn.nextElementSibling;
            btn.classList.toggle("is-open");
            links.classList.toggle("is-open");
          });
        });

document
          .querySelectorAll(".drop-tabs")
          .forEach(function (tabContainer) {
            const panel = tabContainer.closest(".drop-panel");
            tabContainer.querySelectorAll(".drop-tab").forEach(function (tab) {
              tab.addEventListener("mouseenter", function () {
                const targetId = tab.dataset.tab;
                // Remove active from all tabs in this container
                tabContainer
                  .querySelectorAll(".drop-tab")
                  .forEach(function (t) {
                    t.classList.remove("active");
                  });
                panel.querySelectorAll(".drop-section").forEach(function (sec) {
                  sec.classList.remove("active");
                });
                tab.classList.add("active");
                const targetSection = panel.querySelector("#" + targetId);
                if (targetSection) targetSection.classList.add("active");
              });
            });
          });

const services = [
          "Private Limited Company",
          "Limited Liability Partnership",
          "One Person Company",
          "Sole Proprietorship",
          "Nidhi Company",
          "Partnership Firm",
          "Startup India",
          "GST Registration",
          "GST Return Filing",
          "Income Tax Return",
          "ROC Annual Filing",
          "Director KYC",
          "TDS Filing",
          "Trademark Registration",
          "Trademark Search",
          "Trademark Renewal",
          "Copyright Registration",
          "Patent Filing",
          "Design Registration",
          "FSSAI License",
          "Import Export Code",
          "Drug License",
          "Trade License",
          "USA Company Setup",
          "Singapore Company",
          "UK Company",
          "Dubai Freezone",
          "Civil Lawyers",
          "Corporate Lawyers",
          "Divorce Lawyers",
          "Criminal Lawyers",
          "Property Lawyers",
          "Cyber Crime Lawyers",
          "Legal Notice",
          "Arbitration",
          "Bookkeeping",
          "Payroll Management",
          "Professional Tax",
          "ESI Registration",
        ];

const searchInput = document.getElementById("heroSearch");
        const suggestionsBox = document.getElementById("suggestionsDropdown");
        const suggestionsList = document.getElementById("suggestionsList");

searchInput.addEventListener("input", function () {
          const query = searchInput.value.trim().toLowerCase();
          suggestionsList.innerHTML = "";

if (query.length < 2) {
            suggestionsBox.classList.remove("show");
            return;
          }

const matches = services
            .filter(function (s) {
              return s.toLowerCase().includes(query);
            })
            .slice(0, 8);

if (matches.length === 0) {
            suggestionsBox.classList.remove("show");
            return;
          }

matches.forEach(function (match) {
            const item = document.createElement("div");
            item.className = "suggestion-item";
            item.innerHTML =
              '<i class="fa-solid fa-magnifying-glass" style="color:var(--text-muted);font-size:12px;"></i> ' +
              match;
            item.addEventListener("click", function () {
              searchInput.value = match;
              suggestionsBox.classList.remove("show");
            });
            suggestionsList.appendChild(item);
          });

suggestionsBox.classList.add("show");
        });

document.addEventListener("click", function (e) {
          if (!e.target.closest(".nav-search-wrapper")) {
            suggestionsBox.classList.remove("show");
          }
        });

function handleSearch() {
          const query = searchInput.value.trim();
          if (query) {
            window.location.href =
              "all-services.php?q=" + encodeURIComponent(query);
          }
        }

searchInput.addEventListener("keydown", function (e) {
          if (e.key === "Enter") handleSearch();
        });

window.handleSearch = handleSearch;

document.addEventListener("DOMContentLoaded", function () {
          var isLoggedIn = localStorage.getItem("isLoggedIn") === "true";

var desktopLogin = document.getElementById("desktopLoginBtn");
          var desktopDash = document.getElementById("desktopDashboardBtn");
          var mobLogin = document.getElementById("mobLoginBtn");
          var mobDash = document.getElementById("mobDashboardBtn");

if (isLoggedIn) {
            if (desktopLogin) desktopLogin.style.display = "none";
            if (desktopDash) desktopDash.style.display = "inline-flex";
            if (mobLogin) mobLogin.style.display = "none";
            if (mobDash) mobDash.style.display = "flex";
          } else {
            if (desktopLogin) desktopLogin.style.display = "inline-flex";
            if (desktopDash) desktopDash.style.display = "none";
            if (mobLogin) mobLogin.style.display = "flex";
            if (mobDash) mobDash.style.display = "none";
          }
        });
      })();
    </script>
  </body>
</html>

Related Examples

Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Anonymous

1 year ago

1.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Navbar

Morris Muriuki Muthigani

1 year ago

1.4k
Hero Section
A 2 column responsive hero section

Emdadul Islam

2 years ago

3.4k
Material 3 AppBar [Light]
A navbar/appbar that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.2k
Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
sidebar
sidebar

aditya_sharma

1 month ago

116
Navbar with two CTA buttons

Juraj

1 year ago

2.3k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Basic sidebar

Rajesh Maheshwari

1 year ago

2.7k
Sticky left sidebar

Lucas Martinez

3 years ago

16k