IgnitionLab Navbar Navbar Block - Let's templates
Unlock every premium block and template with All-Access from €20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Navbar

IgnitionLab Navbar

A navbar block extracted from the IgnitionLab template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.

0 19
Demo Download
IgnitionLab Navbar preview
ignitionlab.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        window.FontAwesomeConfig = {
          autoReplaceSvg: 'nest'
        };
      </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IgnitionLab Navbar | Tailwind CSS UI Block</title>
    <meta name="description" content="A navbar block extracted from the IgnitionLab template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
    <meta name="keywords" content="IgnitionLab, Tailwind CSS template, HTML website template, SaaS landing page, machine learning infrastructure, neural core, responsive business design">
    <meta name="author" content="Let's templates">
    <link rel="canonical" href="">

    <meta property="og:type" content="product">
    <meta property="og:site_name" content="Let's templates">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="">
    <meta property="og:title" content="IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template">
    <meta property="og:description" content="A high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="IgnitionLab template preview">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template">
    <meta name="twitter:description" content="A high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="IgnitionLab template preview">
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #ffffff;
            color: #1a1a1a;
            overflow-x: hidden;
        }

        .grid-lines {
            background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px);
            background-size: 10% 100%;
        }

        .glass-block {
            backdrop-filter: blur(8px);
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .gradient-bg {
            background: linear-gradient(90deg, #60a5fa 0%, #c084fc 50%, #fb923c 100%);
            filter: blur(60px);
            opacity: 0.8;
        }

        .toggle-switch {
            width: 70px;
            height: 36px;
            background: linear-gradient(45deg, #c084fc, #fb923c);
            border-radius: 20px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        }

        .toggle-knob {
            width: 28px;
            height: 28px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 4px;
            right: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .cta-button {
            background: #1e293b;
            color: white;
            padding: 18px 36px;
            border-radius: 50px;
            font-weight: 700;
            box-shadow: 0 20px 40px -10px rgba(30, 41, 59, 0.4);
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 25px 50px -12px rgba(30, 41, 59, 0.5);
        }

        .section-grid {
            background-image: linear-gradient(#f1f5f9 1px, transparent 1px), linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .il-nav-link.is-active {
            color: #0f172a;
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
        }

        @media (min-width: 1024px) {
            .il-nav-link.is-active {
                background: transparent;
                box-shadow: none;
                font-weight: 700;
            }
        }
    </style>
</head>
<body>
<!-- block:start navbar -->
    <header id="header" class="fixed top-0 left-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 lg:py-0 lg:h-20 grid grid-cols-[1fr_auto] lg:grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-3">
            <a href="#hero" class="flex items-center gap-2 w-fit shrink-0 col-start-1 row-start-1">
                <div class="text-[#6366f1]">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                </div>
                <span class="text-lg sm:text-xl font-bold tracking-tight text-slate-800">IgnitionLab</span>
            </a>

            <nav class="col-span-2 lg:col-span-1 lg:col-start-2 lg:row-start-1 min-w-0 flex items-center gap-0.5 lg:gap-10 lg:justify-center bg-slate-100/90 lg:bg-transparent p-1 lg:p-0 rounded-full lg:rounded-none border border-slate-200/80 lg:border-0 text-[13px] lg:text-[15px] font-semibold lg:font-medium text-slate-500">
                <a href="#hero" data-nav-link class="il-nav-link is-active flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors" aria-current="page">Home</a>
                <a href="#features" data-nav-link class="il-nav-link flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors">Product</a>
                <a href="#pricing" data-nav-link class="il-nav-link flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors">Pricing</a>
                <a href="#contact" data-nav-link class="il-nav-link flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors">Support</a>
            </nav>

            <div class="flex items-center gap-2 sm:gap-4 col-start-2 row-start-1 lg:col-start-3 shrink-0">
                <button class="hidden lg:flex items-center gap-2 px-3 py-1.5 rounded-full border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">
                    <i class="fa-solid fa-globe"></i> EN <i class="fa-solid fa-chevron-down text-[10px]"></i>
                </button>
                <a href="#" class="text-sm font-bold text-slate-700 hover:text-slate-900 px-1.5 lg:px-4">Login</a>
                <a href="#contact" class="bg-[#1e293b] text-white px-3.5 py-2 lg:px-6 lg:py-2.5 rounded-full text-xs lg:text-sm font-bold hover:bg-slate-800 transition-all whitespace-nowrap">Get started</a>
            </div>
        </div>
    </header>
    <!-- block:end navbar -->
<script>
      (function () {
        var links = document.querySelectorAll("[data-nav-link]");

        function setActive(href) {
          links.forEach(function (link) {
            var isActive = link.getAttribute("href") === href;
            link.classList.toggle("is-active", isActive);
            if (isActive) {
              link.setAttribute("aria-current", "page");
            } else {
              link.removeAttribute("aria-current");
            }
          });
        }

        links.forEach(function (link) {
          link.addEventListener("click", function () {
            setActive(link.getAttribute("href"));
          });
        });
      })();
    </script>
</body>
</html>

From this template

IgnitionLab screenshot Free

SaaS

IgnitionLab

Unlimited access to all products

Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.

€20 / 3 months or €60 / year
Get Unlimited Access