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

19.2k

9

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

2 years ago

31.4k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

18k
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

1 year ago

22.1k
Semi transparent navbar

Author:
Laurits

2 years ago

13.7k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

53.9k
Fixed navbar

Author:
Oliver Hansen

1 year ago

22.1k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

15.1k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

8k
Very simple navbar

Author:
Arya

2 years ago

11.6k
Navbar compoent

Author:
Amit Pachange

2 years ago

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

Author:
TailwindFlex

2 years ago

15.9k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

10 months ago

5.7k
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

14k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

12.5k
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

1 year ago

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

Author:
Vikram Choudhary

1 year ago

6k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

7.6k
Navbar
Navbar for primary menu

Author:
Anonymous

9 months ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1