Free
Navbar
Velmora Navbar
A navbar block extracted from the Velmora template, available in Tailwind CSS and Bootstrap.
0
3
velmora.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>Velmora Navbar | Tailwind CSS UI Block</title>
<meta name="description" content="A navbar block extracted from the Velmora template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Velmora, Tailwind CSS template, HTML website template, interior design template, architecture studio, design agency, portfolio, case studies">
<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="Velmora | Tailwind CSS Agency Template">
<meta property="og:description" content="A calm Tailwind CSS interior design studio template with an organic photo hero, scrolling room gallery, project spotlights, a process map and material swatches.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Velmora template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Velmora | Tailwind CSS Agency Template">
<meta name="twitter:description" content="A calm Tailwind CSS interior design studio template with an organic photo hero, scrolling room gallery, project spotlights, a process map and material swatches.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Velmora 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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#121212',
stone: '#f4f4f4',
ember: '#e5483d'
},
fontFamily: {
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; } }
@keyframes marquee { to { transform: translateX(-50%); } }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.sketch { filter: grayscale(1) contrast(1.6) brightness(1.35); opacity: .22; mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%); }
.blob { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); }
.blob-small { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.marquee-track { animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.swatch { clip-path: polygon(0 0, 62% 0, 100% 22%, 100% 100%, 0 100%); }
.swatch-wood { background: repeating-linear-gradient(92deg, #6b4428 0 3px, #7a4f30 3px 7px, #5d3a22 7px 9px, #8a5a36 9px 14px); }
.swatch-brick { background-color: #9c4a36; background-image: linear-gradient(#d9d3cc 2px, transparent 2px), linear-gradient(90deg, #d9d3cc 2px, transparent 2px); background-size: 34px 16px, 34px 32px; background-position: 0 0, 17px 16px; }
.swatch-concrete { background-color: #6f716f; background-image: radial-gradient(#5a5c5b 1px, transparent 1.5px), radial-gradient(#8a8c8a 1px, transparent 1.5px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; }
.swatch-glass { background: linear-gradient(135deg, #2c3640 0%, #5b6b78 30%, #1f262c 46%, #6e7f8c 62%, #2a3138 100%); }
.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; }
.marquee-track { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-white font-sans text-ink antialiased">
<% active_page = "index" %>
<!-- block:start navbar -->
<header class="relative z-30">
<div class="mx-auto flex max-w-[1680px] items-start justify-between px-6 py-6 lg:px-8">
<a href="index.html" class="text-2xl tracking-[0.18em]" aria-label="Velmora home">VELM<span class="relative">O<span class="absolute -top-1.5 left-0 right-0 h-px bg-current"></span></span>RA</a>
<nav class="hidden gap-24 text-lg md:flex" aria-label="Main">
<% [{ "resources" => "Resources", "enterprise" => "Enterprise" }, { "work" => "Work", "services" => "Services", "process" => "Process" }].each do |column| %>
<ul class="space-y-1.5">
<% column.each do |slug, label| %>
<% active = active_page == slug %>
<li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="transition hover:text-ember <%= 'text-ember' if active %>"><%= label %></a></li>
<% end %>
</ul>
<% end %>
</nav>
<button type="button" data-menu-toggle aria-controls="mobile-menu" aria-expanded="false" aria-label="Open menu" class="flex h-10 w-10 items-center justify-center rounded-full border border-ink/20 md:hidden">
<i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>
</div>
<nav id="mobile-menu" class="absolute inset-x-4 top-full hidden rounded-2xl bg-white p-3 shadow-2xl md:hidden" aria-label="Mobile">
<ul class="flex flex-col">
<% { "index" => "Home", "work" => "Work", "services" => "Services", "process" => "Process", "resources" => "Resources", "enterprise" => "Enterprise", "contact" => "Start a space" }.each do |slug, label| %>
<% active = active_page == slug %>
<li><a href="<%= slug == "index" ? "index.html" : "#{slug}.html" %>" <%= 'aria-current="page"'.html_safe if active %> class="block rounded-xl px-4 py-3 text-lg <%= active ? 'bg-stone text-ember' : 'hover:bg-stone' %>"><%= label %></a></li>
<% end %>
</ul>
</nav>
<a href="contact.html" class="fixed left-0 top-1/2 z-40 hidden -translate-y-1/2 rounded-r-lg bg-ink px-3 py-6 text-sm text-white transition hover:bg-ember md:block" style="writing-mode: vertical-rl">Start a space</a>
</header>
<!-- block:end navbar -->
<script>
document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
const menu = document.getElementById(button.getAttribute('aria-controls'));
if (!menu) return;
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!open));
menu.classList.toggle('hidden', open);
});
});
document.querySelectorAll('[data-tabs]').forEach((tabs) => {
const buttons = tabs.querySelectorAll('[role="tab"]');
buttons.forEach((button) => {
button.addEventListener('click', () => {
buttons.forEach((other) => {
const active = other === button;
other.setAttribute('aria-selected', String(active));
document.getElementById(other.getAttribute('aria-controls')).hidden = !active;
});
});
});
});
document.querySelectorAll('[data-accordion]').forEach((accordion) => {
const buttons = accordion.querySelectorAll('[data-accordion-button]');
buttons.forEach((button) => {
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') === 'true';
buttons.forEach((other) => {
other.setAttribute('aria-expanded', 'false');
document.getElementById(other.getAttribute('aria-controls')).hidden = true;
});
button.setAttribute('aria-expanded', String(!open));
document.getElementById(button.getAttribute('aria-controls')).hidden = open;
});
});
});
document.querySelectorAll('[data-filter-group]').forEach((group) => {
const chips = group.querySelectorAll('[data-filter]');
chips.forEach((chip) => {
chip.addEventListener('click', () => {
chips.forEach((other) => {
const active = other === chip;
other.setAttribute('aria-pressed', String(active));
other.classList.toggle('bg-ink', active);
other.classList.toggle('text-white', active);
});
document.querySelectorAll('[data-filter-item]').forEach((item) => {
item.hidden = chip.dataset.filter !== 'all' && item.dataset.category !== chip.dataset.filter;
});
});
});
});
document.querySelectorAll('[data-newsletter], [data-contact-form]').forEach((form) => {
form.addEventListener('submit', (event) => {
event.preventDefault();
const status = form.querySelector('[data-form-status]');
if (!form.checkValidity()) {
status.textContent = form.dataset.error || 'Please enter a valid email address.';
return;
}
status.textContent = form.dataset.success || 'Thank you! Your first letter is on its way.';
form.reset();
});
});
document.querySelectorAll('[data-current-year]').forEach((el) => { el.textContent = new Date().getFullYear(); });
(() => {
const items = document.querySelectorAll('[data-reveal]');
const skip = navigator.webdriver || !('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!items.length || skip) return;
document.documentElement.classList.add('reveal-ready');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
});
}, { rootMargin: '0px 0px -10% 0px' });
items.forEach((item) => observer.observe(item));
})();
</script>
</body>
</html>
From this template
Agency
Velmora
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