Postwave 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

Postwave Navbar

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

0 3
Demo Download
Postwave Navbar preview
postwave.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>Postwave Navbar | Tailwind CSS UI Block</title>
  <meta name="description" content="A navbar block extracted from the Postwave template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Postwave, Tailwind CSS template, HTML website template, blog template, creator economy blog, influencer marketing, resources page, article template, newsletter signup, dark blog 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="Postwave | Tailwind CSS Blog Template">
  <meta property="og:description" content="A dark, editorial Tailwind CSS blog template for creator platforms, with live search, image-led post cards and a personal reading list.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Postwave template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Postwave | Tailwind CSS Blog Template">
  <meta name="twitter:description" content="A dark, editorial Tailwind CSS blog template for creator platforms, with live search, image-led post cards and a personal reading list.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Postwave template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Antonio:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { night: { DEFAULT: '#0a0a0a', page: '#1b1b1d', card: '#141416', line: '#2c2c30' }, volt: { DEFAULT: '#c6ff3d', soft: '#e6ffb0' } },
          fontFamily: { sans: ['Inter', 'sans-serif'], display: ['Antonio', 'sans-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; }
    [hidden] { display: none !important; }
    .chips { scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .ticker { animation: ticker 32s linear infinite; }
    .ticker:hover { animation-play-state: paused; }
    @keyframes ticker { to { transform: translateX(-50%); } }
    .ticket { -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
    .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; }
      .ticker { animation: none; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-night-page font-sans text-white antialiased">
<% active_page = "index" %>
<% nav = { "brands" => "For brands", "ambassadors" => "For creators", "about" => "About", "cases" => "Cases", "index" => "Resources" } %>
<!-- block:start navbar -->
  <header class="sticky top-0 z-40 px-3 pt-3 md:px-4">
    <nav class="mx-auto grid max-w-[90rem] grid-cols-[1fr_auto_1fr] items-center gap-4 rounded-2xl bg-night px-4 py-3 md:px-6" aria-label="Main">
      <ul class="hidden items-center gap-6 text-sm lg:flex">
        <% nav.each do |slug, label| %>
          <% active = active_page == slug %>
          <li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="transition <%= active ? 'font-semibold text-white' : 'text-white/60 hover:text-white' %>"><%= label %></a></li>
        <% end %>
      </ul>
      <a href="index.html" class="col-start-1 font-display text-3xl font-bold uppercase tracking-tight lg:col-start-2">Postwave</a>
      <div class="col-start-3 flex items-center justify-end gap-2">
        <a href="contact.html" class="hidden rounded-lg border border-white/30 px-4 py-2 text-sm font-medium transition hover:border-white sm:block">Request a demo</a>
        <a href="brands.html" class="hidden rounded-lg bg-white px-4 py-2 text-sm font-semibold text-night transition hover:bg-volt sm:block">Open the app</a>
        <button type="button" data-menu-toggle aria-controls="mobile-menu" aria-expanded="false" class="grid h-10 w-10 place-items-center rounded-lg border border-white/30 lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars" aria-hidden="true"></i></button>
      </div>
    </nav>
    <div id="mobile-menu" class="mx-auto mt-2 hidden max-w-[90rem] rounded-2xl bg-night p-4 lg:hidden">
      <ul class="grid gap-1 font-display text-3xl font-semibold uppercase">
        <% nav.merge("contact" => "Request a demo").each do |slug, label| %>
          <% active = active_page == slug %>
          <li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="block rounded-lg px-2 py-1 <%= active ? 'bg-volt text-night' : 'hover:text-volt' %>"><%= label %></a></li>
        <% end %>
      </ul>
    </div>
  </header>
  <!-- block:end navbar -->
<script>
    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;

    document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
      const menu = document.getElementById(button.getAttribute('aria-controls'));
      button.addEventListener('click', () => {
        const open = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', String(!open));
        menu.classList.toggle('hidden', open);
      });
    });

    document.querySelectorAll('[data-search-root]').forEach((root) => {
      const input = root.querySelector('[data-search]');
      const chips = [...root.querySelectorAll('[data-chip]')];
      const posts = [...document.querySelectorAll('[data-post]')];
      const empty = document.querySelector('[data-empty]');
      let category = 'All';
      const paint = () => {
        const query = input.value.trim().toLowerCase();
        let shown = 0;
        posts.forEach((post) => {
          const match = (category === 'All' || post.dataset.category === category) && (!query || post.dataset.title.toLowerCase().includes(query) || post.dataset.category.toLowerCase().includes(query));
          post.hidden = !match;
          if (match) shown += 1;
        });
        root.querySelector('[data-result-count]').textContent = shown;
        if (empty) empty.hidden = shown > 0;
      };
      chips.forEach((chip) => chip.addEventListener('click', () => {
        category = chip.dataset.chip;
        chips.forEach((other) => other.setAttribute('aria-pressed', String(other === chip)));
        paint();
      }));
      input.addEventListener('input', paint);
      document.querySelector('[data-reset]')?.addEventListener('click', () => { input.value = ''; chips[0].click(); });
    });

    document.querySelectorAll('[data-reading]').forEach((root) => {
      const toggle = root.querySelector('[data-reading-toggle]');
      const panel = document.getElementById(toggle.getAttribute('aria-controls'));
      const list = root.querySelector('[data-reading-items]');
      const read = () => { try { return JSON.parse(localStorage.getItem('postwave-reading') || '[]'); } catch (error) { return []; } };
      const write = (items) => { try { localStorage.setItem('postwave-reading', JSON.stringify(items)); } catch (error) { /* storage unavailable */ } };
      let saved = read();
      const paint = () => {
        root.querySelector('[data-reading-count]').textContent = saved.length;
        root.querySelector('[data-reading-empty]').hidden = saved.length > 0;
        list.replaceChildren(...saved.map((item) => {
          const li = document.createElement('li');
          const link = document.createElement('a');
          link.href = item.href; link.textContent = item.title; link.className = 'block rounded-lg bg-white/5 px-3 py-2 hover:text-volt';
          li.append(link);
          return li;
        }));
        document.querySelectorAll('[data-save]').forEach((button) => button.setAttribute('aria-pressed', String(saved.some((item) => item.id === button.dataset.save))));
      };
      document.querySelectorAll('[data-save]').forEach((button) => button.addEventListener('click', () => {
        const id = button.dataset.save;
        saved = saved.some((item) => item.id === id) ? saved.filter((item) => item.id !== id) : [...saved, { id, title: button.dataset.saveTitle, href: button.dataset.saveHref }];
        write(saved);
        paint();
      }));
      toggle.addEventListener('click', () => { const open = panel.hidden; panel.hidden = !open; toggle.setAttribute('aria-expanded', String(open)); });
      document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !panel.hidden) { panel.hidden = true; toggle.setAttribute('aria-expanded', 'false'); toggle.focus(); } });
      paint();
    });

    document.querySelectorAll('[data-remind]').forEach((button) => button.addEventListener('click', () => {
      const on = button.getAttribute('aria-pressed') !== 'true';
      button.setAttribute('aria-pressed', String(on));
      button.querySelector('[data-remind-label]').textContent = on ? 'Reminder set' : 'Remind me';
    }));

    document.querySelectorAll('[data-newsletter]').forEach((form) => {
      const status = form.parentElement.querySelector('[data-form-status]');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const email = form.elements.email;
        if (!email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
        status.textContent = "You're in. First drop lands this Friday.";
        form.reset();
      });
    });

    if (watchMotion) {
      document.documentElement.classList.add('reveal-ready');
      const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
        if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
      }), { threshold: 0.15 });
      document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
    }
  </script>
</body>
</html>

From this template

Postwave screenshot

Blog

Postwave

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