Home
Noob
Navbar Section

Navbar Section

Responsive Navbar

This tailwind example is contributed by Noob, on 21-Aug-2022. Component is made with Tailwind CSS v3.

Navbar

Author Noob

23.3k

13

Fork Fullscreen

<header class="lg:px-16 px-4 bg-white flex flex-wrap items-center py-4 shadow-md">
    <div class="flex-1 flex justify-between items-center">
        <a href="#" class="text-xl">Company</a>
    </div>

<label for="menu-toggle" class="pointer-cursor md:hidden block">
      <svg class="fill-current text-gray-900"
        xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <title>menu</title>
        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
      </svg>
    </label>
    <input class="hidden" type="checkbox" id="menu-toggle" />

<div class="hidden md:flex md:items-center md:w-auto w-full" id="menu">
        <nav>
            <ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
                <li><a class="md:p-4 py-3 px-0 block" href="#">AboutUs</a></li>
                <li><a class="md:p-4 py-3 px-0 block" href="#">Treatments</a></li>
                <li><a class="md:p-4 py-3 px-0 block" href="#">Blog</a></li>
                <li><a class="md:p-4 py-3 px-0 block md:mb-0 mb-2" href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</header>

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

3 years ago

38k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

3 years ago

20.9k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

2 years ago

27.7k
Semi transparent navbar

Author:
Laurits

3 years ago

16.1k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

61.5k
Fixed navbar

Author:
Oliver Hansen

2 years ago

27.3k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

17.1k
Navigation Bar Responsive

Author:
SAI BENDE

2 years ago

10.1k
Very simple navbar

Author:
Arya

3 years ago

14.1k
Navbar compoent

Author:
Amit Pachange

3 years ago

16.7k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

3 years ago

19.4k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.9k
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

16.8k
Simple navbar
semi transparent

Author:
Laurits

3 years ago

14.1k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Author:
Mamadou Diouma II Bah

2 years ago

16.1k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

2 years ago

7.3k
navigation
tailwind navigation pills

Author:
Anonymous

2 years ago

9.1k
Navbar
Navbar for primary menu

Author:
Anonymous

1 year ago

6.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12