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.9k

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

32.3k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

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

23.1k
Semi transparent navbar

Author:
Laurits

2 years ago

14.2k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

55.2k
Fixed navbar

Author:
Oliver Hansen

1 year ago

22.9k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

15.5k
Navigation Bar Responsive

Author:
SAI BENDE

1 year ago

8.2k
Very simple navbar

Author:
Arya

2 years ago

11.8k
Navbar compoent

Author:
Amit Pachange

2 years ago

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

Author:
TailwindFlex

2 years ago

16.5k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

11 months ago

6k
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

14.5k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

12.8k
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.6k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

1 year ago

6.2k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

7.8k
Navbar
Navbar for primary menu

Author:
Anonymous

10 months ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

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