Free
Navbar
JourneyMuse Navbar
A navbar block extracted from the JourneyMuse template, available in Tailwind CSS and Bootstrap.
0
2
journeymuse.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>JourneyMuse Navbar | Tailwind CSS UI Block</title>
<meta name="description" content="A navbar block extracted from the JourneyMuse template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="JourneyMuse, Tailwind CSS template, HTML website template, travel blog template, adventure journal, destination guides, responsive editorial 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="JourneyMuse | Tailwind CSS Travel Blog Template">
<meta property="og:description" content="A polished Tailwind CSS travel blog template for destination stories, practical guides, adventure journals, and inspiring editorial content.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="JourneyMuse template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="JourneyMuse | Tailwind CSS Travel Blog Template">
<meta name="twitter:description" content="A polished Tailwind CSS travel blog template for destination stories, practical guides, adventure journals, and inspiring editorial content.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="JourneyMuse template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<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; }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
body {
font-family: 'Inter', sans-serif;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- block:start navbar -->
<nav id="header" class="bg-[#4a6b8a] text-white py-4 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex w-full flex-col items-center gap-4 lg:w-auto lg:flex-row lg:gap-8">
<a href="index.html" class="flex items-center gap-2">
<div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
<i class="fa-solid fa-infinity text-white"></i>
</div>
<span class="text-xl font-bold tracking-tight">JourneyMuse</span>
</a>
<div class="flex max-w-full items-center gap-6 overflow-x-auto whitespace-nowrap text-sm font-medium">
<a href="stays.html" class="hover:text-white/80 transition-colors">Stays</a>
<a href="flights.html" class="hover:text-white/80 transition-colors">Flights</a>
<a href="trains.html" class="hover:text-white/80 transition-colors">Trains</a>
<a href="travel.html" class="hover:text-white/80 transition-colors underline underline-offset-8">Travel</a>
<a href="rentals.html" class="hover:text-white/80 transition-colors">Rentals</a>
</div>
</div>
<div class="flex flex-1 max-w-md w-full relative">
<input type="text" placeholder="Search your next destination..." class="w-full bg-white/10 border border-white/20 rounded-full py-2 px-5 pl-12 text-sm focus:outline-none focus:ring-2 focus:ring-white/30 transition-all placeholder:text-white/60">
<i class="fa-solid fa-magnifying-glass absolute left-5 top-1/2 -translate-y-1/2 text-white/60"></i>
</div>
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-2 text-sm font-medium">
<i class="fa-solid fa-globe"></i>
<span>EN</span>
</div>
<a href="#" class="text-sm font-medium hover:text-white/80">Log In</a>
<a href="#" class="bg-white text-[#4a6b8a] px-5 py-2 rounded-full text-sm font-bold hover:bg-gray-100 transition-colors">Sign Up</a>
</div>
</div>
</nav>
<!-- block:end navbar -->
<script>
document.querySelectorAll('[data-hero-carousel]').forEach((carousel) => {
const slides = Array.from(carousel.querySelectorAll('[data-hero-slide]'));
const dots = Array.from(carousel.querySelectorAll('[data-hero-dot]'));
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let activeIndex = 0;
let rotation;
const showSlide = (index) => {
activeIndex = (index + slides.length) % slides.length;
slides.forEach((slide, slideIndex) => {
const isActive = slideIndex === activeIndex;
slide.classList.toggle('opacity-100', isActive);
slide.classList.toggle('opacity-0', !isActive);
slide.classList.toggle('pointer-events-none', !isActive);
slide.setAttribute('aria-hidden', String(!isActive));
});
dots.forEach((dot, dotIndex) => {
const isActive = dotIndex === activeIndex;
dot.classList.toggle('bg-white', isActive);
dot.classList.toggle('bg-white/30', !isActive);
dot.setAttribute('aria-current', String(isActive));
});
};
const stopRotation = () => window.clearInterval(rotation);
const startRotation = () => {
if (reduceMotion) return;
stopRotation();
rotation = window.setInterval(() => showSlide(activeIndex + 1), 6000);
};
dots.forEach((dot, index) => dot.addEventListener('click', () => {
showSlide(index);
startRotation();
}));
carousel.addEventListener('mouseenter', stopRotation);
carousel.addEventListener('mouseleave', startRotation);
carousel.addEventListener('focusin', stopRotation);
carousel.addEventListener('focusout', startRotation);
carousel.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') showSlide(activeIndex - 1);
if (event.key === 'ArrowRight') showSlide(activeIndex + 1);
});
startRotation();
});
</script>
<script>
document.querySelectorAll('[data-blog-grid]').forEach((grid) => {
const section = grid.closest('section');
const filters = section.querySelectorAll('[data-blog-filter]');
const posts = grid.querySelectorAll('[data-blog-category]');
const inactiveClasses = ['text-gray-600', 'font-medium', 'hover:bg-gray-100'];
filters.forEach((button) => {
button.addEventListener('click', () => {
const selectedCategory = button.dataset.blogFilter;
filters.forEach((filter) => {
const isActive = filter === button;
filter.setAttribute('aria-pressed', String(isActive));
filter.classList.toggle('bg-[#4a6b8a]', isActive);
filter.classList.toggle('text-white', isActive);
filter.classList.toggle('font-bold', isActive);
inactiveClasses.forEach((className) => filter.classList.toggle(className, !isActive));
});
posts.forEach((post) => {
post.hidden = selectedCategory !== 'all' && post.dataset.blogCategory !== selectedCategory;
});
});
});
});
</script>
</body>
</html>
From this template
Free
Blog
JourneyMuse
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