Wayloom 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

Wayloom Navbar

A navbar block extracted from the Wayloom template, available in Tailwind CSS and Bootstrap.

0 2
Demo Download
Wayloom Navbar preview
wayloom.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>Wayloom Navbar | Tailwind CSS UI Block</title>
  <meta name="description" content="A navbar block extracted from the Wayloom template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Wayloom, Tailwind CSS template, HTML website template, startup template, travel tech, experience marketplace, B2B platform, multi-page startup website">
  <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="Wayloom | Tailwind CSS Startup Template">
  <meta property="og:description" content="A calm, editorial Tailwind CSS startup template for travel-tech and marketplace platforms, with an expanding image hero, impact stats, a four-step model and a team page.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Wayloom template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Wayloom | Tailwind CSS Startup Template">
  <meta name="twitter:description" content="A calm, editorial Tailwind CSS startup template for travel-tech and marketplace platforms, with an expanding image hero, impact stats, a four-step model and a team page.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Wayloom template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=Cormorant+Garamond:wght@500&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            cream: '#f5f0e3',
            sand: '#e8e4d4',
            pine: '#1f5552',
            'pine-dark': '#163f3d'
          },
          fontFamily: {
            display: ['"Schibsted Grotesk"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
            sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
            serif: ['"Cormorant Garamond"', 'Georgia', 'serif']
          }
        }
      }
    };
  </script>
  <style>
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
    ::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
    @keyframes page-fade-out { to { opacity: 0; } }
    @keyframes page-fade-in { from { opacity: 0; } }
    html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
    [hidden] { display: none !important; }
    [data-panel] { flex: 1 1 0%; min-width: 0; }
    [data-panel][aria-expanded="true"] { flex: 5 1 0%; }
    [data-panel] [data-panel-body] { opacity: 0; transition: opacity .4s ease .1s; }
    [data-panel][aria-expanded="true"] [data-panel-body] { opacity: 1; }
    [data-panel][aria-expanded="true"] [data-panel-tall] { display: none; }
    [data-panel][aria-expanded="false"] [data-panel-body] { display: none; }
    .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
    .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      [data-panel] [data-panel-body] { transition: none; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-cream font-sans text-pine antialiased">
<% active_page = "index" %>
<!-- block:start navbar -->
  <header class="sticky top-0 z-40 bg-cream/95 backdrop-blur">
    <nav class="mx-auto flex max-w-[90rem] items-stretch justify-between border-b border-pine/15 px-6 lg:px-20">
      <a href="index.html" class="flex items-center gap-2 py-6 pr-10 font-display text-3xl font-bold tracking-tight text-pine lg:border-r lg:border-pine/15">
        <i class="fa-solid fa-cube text-2xl" aria-hidden="true"></i>
        Wayloom
      </a>
      <div class="hidden flex-1 items-center justify-center gap-2 xl:flex">
        <% { "index" => "Home", "problem" => "Problem", "solution" => "Solution", "model" => "Model", "platform" => "Platform", "about" => "About", "team" => "Team" }.each do |slug, label| %>
          <% active = active_page == slug %>
          <a href="<%= slug == "index" ? "index.html" : "#{slug}.html" %>" <%= 'aria-current="page"'.html_safe if active %> class="px-6 py-3 text-lg transition <%= active ? "bg-sand text-pine" : "text-pine-dark/80 hover:text-pine" %>"><%= label %></a>
        <% end %>
      </div>
      <div class="flex items-center gap-4 py-5 lg:border-l lg:border-pine/15 lg:pl-10">
        <a href="contact.html" class="hidden bg-pine px-8 py-4 font-display text-lg font-semibold text-cream transition hover:bg-pine-dark sm:inline-flex">Partner with us</a>
        <button type="button" id="menu-toggle" aria-expanded="false" aria-controls="mobile-menu" class="inline-flex h-12 w-12 items-center justify-center border border-pine/20 xl:hidden">
          <i class="fa-solid fa-bars" aria-hidden="true"></i>
          <span class="sr-only">Toggle menu</span>
        </button>
      </div>
    </nav>
    <div id="mobile-menu" hidden class="border-b border-pine/15 bg-cream px-6 pb-6 xl:hidden">
      <% { "index" => "Home", "problem" => "Problem", "solution" => "Solution", "model" => "Model", "platform" => "Platform", "about" => "About", "team" => "Team" }.each do |slug, label| %>
        <a href="<%= slug == "index" ? "index.html" : "#{slug}.html" %>" class="block border-b border-pine/10 py-3 text-lg <%= "font-semibold" if active_page == slug %>"><%= label %></a>
      <% end %>
      <a href="contact.html" class="mt-4 block bg-pine px-6 py-4 text-center font-display font-semibold text-cream">Partner with us</a>
    </div>
  </header>
  <!-- block:end navbar -->
<script>
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    if (menuToggle && mobileMenu) {
      menuToggle.addEventListener('click', () => {
        const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
        menuToggle.setAttribute('aria-expanded', String(!expanded));
        mobileMenu.hidden = expanded;
      });
    }

    const panels = document.querySelectorAll('[data-panel]');
    panels.forEach((panel) => {
      panel.querySelector('[data-panel-trigger]').addEventListener('click', () => {
        panels.forEach((other) => {
          const active = other === panel;
          other.setAttribute('aria-expanded', String(active));
          const trigger = other.querySelector('[data-panel-trigger]');
          trigger.setAttribute('aria-selected', String(active));
          trigger.classList.toggle('pointer-events-none', active);
          const number = other.querySelector('[data-panel-number]');
          number.classList.toggle('text-pine', active);
          number.classList.toggle('text-white', !active);
        });
      });
    });

    document.querySelectorAll('[data-current-year]').forEach((el) => { el.textContent = new Date().getFullYear(); });

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!reduceMotion && !navigator.webdriver && 'IntersectionObserver' in window) {
      document.body.classList.add('reveal-ready');
      const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('is-visible');
          revealObserver.unobserve(entry.target);
        });
      }, { threshold: 0.15 });
      document.querySelectorAll('[data-reveal]').forEach((el) => revealObserver.observe(el));

      const countObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          const el = entry.target;
          const target = parseInt(el.dataset.countTo, 10);
          const start = performance.now();
          const step = (now) => {
            const progress = Math.min((now - start) / 700, 1);
            el.textContent = Math.round(progress * target).toLocaleString('en-US');
            if (progress < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
          countObserver.unobserve(el);
        });
      }, { threshold: 0.4 });
      document.querySelectorAll('[data-count-to]').forEach((el) => countObserver.observe(el));
    }
  </script>
</body>
</html>

From this template

Wayloom screenshot

Startup

Wayloom

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