In this section we will see fixed sticky navbar in nextjs with tailwind css. We will see responsive sticky navbar using, sticky header on scroll, sticky header blur effect tailwind css with NextJS.
Install Tailwind CSS In NextJS 13
Example 1
Simple nextjs with tailwind css fixed sticky navbar.
import Link from 'next/link'
import React from 'react'
export default function Home() {
return (
<div>
<header className="sticky top-0 z-30 w-full p-6 bg-white sm:px-4 shadow">
<div className="flex items-center justify-between mx-auto max-w-7xl">
<Link href="/">
<span className="text-2xl font-bold text-purple-600 font-serif">Logo</span>
</Link>
<div className="flex items-center space-x-1">
<ul className="hidden space-x-2 md:inline-flex">
<li><Link href="/" className="px-4 py-2 font-semibold text-gray-600 rounded">Home</Link></li>
<li><Link href="/about" className="px-4 py-2 font-semibold text-gray-600 rounded">About US</Link></li>
</ul>
<div className="inline-flex md:hidden">
<button className="flex-none px-2 ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>
</div>
</header>
<section className="p-4 mx-auto max-w-7xl bg-gray-100">
<div className="mx-auto">
<h1 className="text-2xl font-bold text-center">Create Sticky Header on Scroll NextJs with Tailwind CSS </h1>
<p>dummay data Lorem....</p>
</div>
</section>
</div>
)
}
sticky header on scroll nextjs with tailwind
Example 2
Nextjs with tailwind css responsive sticky navbar on scroll using usestate hook.
import { useState } from "react"
import Head from 'next/head'
import Link from "next/link"
export default function Home() {
const [open, setOpen] = useState(false)
return (
<>
<Head>
<title> Next responsive sticky navbar with tailwind </title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<header className="w-full mx-auto bg-white px-8 sticky top-0 z-30">
<div className="container mx-auto">
<div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div className="lg:w-0 lg:flex-1">
<Link href="/" className="flex items-center">
<div className="text-xl font-bold w-auto z-50">Logo</div>
</Link>
</div>
<div className="-mr-2 -my-2 md:hidden">
<button
onClick={() => setOpen(!open)}
aria-label="Toggle Menu"
type="button"
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
>
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<nav className="hidden md:flex space-x-10">
<Link
href='/'
className="text-base leading-6 font-medium text-secondary-500 hover:text-primary-500 border-transparent border-b-2 hover:border-primary-500 hover:border-b-primary hover:border-b-2 focus:outline-none focus:text-primary-500 transition duration-300"
>Home
</Link>
<Link
href='/about'
className="text-base leading-6 font-medium text-secondary-500 hover:text-primary-500 border-transparent border-b-2 hover:border-primary-500 hover:border-b-primary hover:border-b-2 focus:outline-none focus:text-primary-500 transition duration-300"
>About US
</Link>
</nav>
</div>
</div>
<div
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden z-20"
style={{ display: open ? "block" : "none" }}
>
<div className="rounded-lg shadow-lg">
<div className="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5 space-y-6">
<div className="flex items-center justify-end">
<div className="-mr-2">
<button
onClick={() => setOpen(!open)}
type="button"
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-300"
>
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div>
<nav className="grid gap-y-8">
<Link
href='/'
className="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition duration-300"
>
<div className="text-base leading-6 font-medium text-gray-900">Home</div>
</Link>
<Link
href='/about'
className="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition duration-300"
>
<div className="text-base leading-6 font-medium text-gray-900">About US</div>
</Link>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<div>
Lorem ipsum dolor sit,
</div>
</main>
</>
)
}
Example 3
Nextjs with tailwind css sticky header on scroll blur effect.
import { useState } from "react";
import Head from "next/head";
import Link from "next/link";
export default function Home() {
const [open, setOpen] = useState(false);
return (
<>
<Head>
<title> Next sticky navbar with tailwind blur effect</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<header className="w-full mx-auto bg-white px-8 sticky top-0 z-30 backdrop-blur-md bg-white/70">
<div className="container mx-auto">
<div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div className="lg:w-0 lg:flex-1">
<Link href="/" className="flex items-center">
<div className="text-xl font-bold w-auto z-50">Logo</div>
</Link>
</div>
<div className="-mr-2 -my-2 md:hidden">
<button
onClick={() => setOpen(!open)}
type="button"
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
>
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<nav className="hidden md:flex space-x-10">
<Link
href="/"
className="text-base leading-6 font-medium text-secondary-500 hover:text-primary-500 border-transparent border-b-2 hover:border-primary-500 hover:border-b-primary hover:border-b-2 focus:outline-none focus:text-primary-500 transition duration-300"
>
Home
</Link>
<Link
href="/about"
className="text-base leading-6 font-medium text-secondary-500 hover:text-primary-500 border-transparent border-b-2 hover:border-primary-500 hover:border-b-primary hover:border-b-2 focus:outline-none focus:text-primary-500 transition duration-300"
>
About US
</Link>
</nav>
</div>
</div>
<div
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden z-20"
style={{ display: open ? "block" : "none" }}
>
<div className="rounded-lg shadow-lg">
<div className="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5 space-y-6">
<div className="flex items-center justify-end">
<div className="-mr-2">
<button
onClick={() => setOpen(!open)}
type="button"
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-300"
>
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div>
<nav className="grid gap-y-8">
<Link
href="/"
className="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition duration-300"
>
<div className="text-base leading-6 font-medium text-gray-900">
Home
</div>
</Link>
<Link
href="/about"
className="-m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition duration-300"
>
<div className="text-base leading-6 font-medium text-gray-900">
About US
</div>
</Link>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
<div>Lorem ipsum dolor sit,</div>
</main>
</>
);
}
nextjs navbar blur effect with tailwind
