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

21.4k

10

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

35k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

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

25.6k
Semi transparent navbar

Author:
Laurits

2 years ago

15.2k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

58.3k
Fixed navbar

Author:
Oliver Hansen

2 years ago

24.9k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

16.3k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

9.1k
Very simple navbar

Author:
Arya

2 years ago

13k
Navbar compoent

Author:
Amit Pachange

2 years ago

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

Author:
TailwindFlex

3 years ago

17.9k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.9k
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

15.5k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

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

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

Author:
Vikram Choudhary

1 year ago

6.8k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

8.2k
Navbar
Navbar for primary menu

Author:
Anonymous

1 year ago

4.9k

Explore components by Tags

Didn't find component you were looking for?

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

© 2025 TailwindFlex. All Rights Reserved.

v1.1