Responsive NavBar Using CSS Only

A complete responsive navbar only using tailwind css

This tailwind example is contributed by Shivam Vishwakarma, on 21-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Header Navigations Navbar

Author Shivam Vishwakarma

Tailwind v3.4 988 4

Fork Fullscreen

<header class="p-4 shadow-lg">
      <section
        class="max-w-screen-xl mx-auto flex justify-between items-center group"
      >
        <div
          class="size-14 border rounded-full overflow-hidden border-black shadow-lg hover:rotate"
        >
          <img
            src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?semt=ais_hybrid&w=740"
          />
        </div>
        <input type="checkbox" id="nav-toggle" hidden />
        <menu
          class="flex gap-4 text-lg font-semibold fixed md:static md:flex-row md:gap-8 bg-white md:bg-transparent left-0 top-20 w-full md:w-auto shadow-lg md:shadow-none flex-col md:flex-row justify-center md:justify-start p-4 md:p-0 *:border-b md:*:border-none border-b-gray-200 md:border-b-0 transition-all duration-300 ease-in-out -translate-y-[200%] group-has-[:checked]:translate-y-0 md:translate-y-0 z-10"
        >
          <a href="/"> Home </a>
          <a href="/"> About </a>
          <a href="/"> Portfolio </a>
          <a href="/"> Contact </a>
        </menu>
        <label
          for="nav-toggle"
          class="cursor-pointer md:hidden text-2xl font-bold"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-8 h-8"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
            />
          </svg>
        </label>
        <label for="nav-toggle" class="hidden fixed group-has-[:checked]:block top-0 left-0 right-0 bottom-0 bg-black/10 z-0"></label>
      </section>
    </header>

Related Examples

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.8k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k
Animated navigation with Tailwind CSS and Apinejs

Michael Andreuzza

2 years ago

5.8k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

zobaidul kaziex

2 years ago

4.3k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.2k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

3.9k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k