Free
Navbar
Nuvora Navbar
A navbar block extracted from the Nuvora template, available in Tailwind CSS and Bootstrap.
0
1
nuvora.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>Nuvora Navbar | Tailwind CSS UI Block</title>
<meta name="description" content="A navbar block extracted from the Nuvora template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Nuvora, Tailwind CSS template, HTML website template, SaaS template, CRM landing page, customer support platform, pricing page, testimonial carousel">
<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="Nuvora | Tailwind CSS SaaS Template">
<meta property="og:description" content="A Tailwind CSS SaaS template for customer support and CRM platforms, with a functionality grid, step-by-step onboarding, testimonial carousel, and pricing page.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Nuvora template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Nuvora | Tailwind CSS SaaS Template">
<meta name="twitter:description" content="A Tailwind CSS SaaS template for customer support and CRM platforms, with a functionality grid, step-by-step onboarding, testimonial carousel, and pricing page.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Nuvora 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=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
paper: '#f4f2ec',
ink: '#17181c',
accent: '#5850ec',
'accent-soft': '#e8e6fd'
},
fontFamily: {
serif: ['Fraunces', 'ui-serif', 'Georgia', 'serif'],
sans: ['Inter', 'ui-sans-serif', 'system-ui', '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; scroll-padding-top: 5rem; }
[hidden] { display: none !important; }
[data-count-to] { font-variant-numeric: tabular-nums; }
.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-carousel-track] { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-paper font-sans text-ink antialiased">
<% active_page = "index" %>
<!-- block:start navbar -->
<header class="sticky top-0 z-40 border-b border-black/10 bg-paper/95 backdrop-blur">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-5 lg:px-10">
<a href="index.html" class="flex items-center gap-2 font-serif text-lg font-semibold">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-ink text-paper"><i class="fa-solid fa-diamond text-xs" aria-hidden="true"></i></span>
Nuvora
</a>
<div class="hidden items-center gap-10 md:flex">
<% { "features" => "Features", "pricing" => "Pricing", "index.html#testimonials" => "Testimonials" }.each do |slug, label| %>
<% active = active_page == slug %>
<a href="<%= slug.include?(".html") ? slug : "#{slug}.html" %>" <%= 'aria-current="page"'.html_safe if active %> class="text-sm font-medium transition <%= active ? "text-ink underline decoration-2 underline-offset-8" : "text-ink/70 hover:text-ink" %>"><%= label %></a>
<% end %>
</div>
<a href="pricing.html" class="hidden rounded-full bg-ink px-5 py-2.5 text-sm font-semibold text-paper transition hover:bg-black md:inline-flex">Sign up</a>
<button type="button" id="menu-toggle" aria-expanded="false" aria-controls="mobile-menu" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-black/10 md:hidden">
<i class="fa-solid fa-bars text-sm" aria-hidden="true"></i>
<span class="sr-only">Toggle menu</span>
</button>
</nav>
<div id="mobile-menu" hidden class="border-t border-black/10 bg-paper px-6 pb-6 md:hidden">
<a href="features.html" class="block py-3 text-sm font-medium text-ink/70">Features</a>
<a href="pricing.html" class="block py-3 text-sm font-medium text-ink/70">Pricing</a>
<a href="index.html#testimonials" class="block py-3 text-sm font-medium text-ink/70">Testimonials</a>
<a href="pricing.html" class="mt-2 block rounded-full bg-ink px-5 py-2.5 text-center text-sm font-semibold text-paper">Sign up</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;
});
}
document.querySelectorAll('[data-carousel]').forEach((carousel) => {
const track = carousel.querySelector('[data-carousel-track]');
const dots = carousel.querySelectorAll('[data-carousel-dot]');
const count = track.children.length;
let index = 0;
const goTo = (next) => {
index = (next + count) % count;
track.style.transform = `translateX(-${index * 100}%)`;
dots.forEach((dot, i) => {
dot.classList.toggle('bg-ink', i === index);
dot.classList.toggle('bg-ink/20', i !== index);
dot.setAttribute('aria-current', String(i === index));
});
};
carousel.querySelector('[data-carousel-prev]').addEventListener('click', () => goTo(index - 1));
carousel.querySelector('[data-carousel-next]').addEventListener('click', () => goTo(index + 1));
dots.forEach((dot) => dot.addEventListener('click', () => goTo(Number(dot.dataset.carouselDot))));
});
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
Startup
Nuvora
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