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

18.1k

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

1 year ago

29.4k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

1 year ago

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

20.7k
Semi transparent navbar

Author:
Laurits

1 year ago

13k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

50.8k
Fixed navbar

Author:
Oliver Hansen

1 year ago

20.5k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

14.5k
Navigation Bar Responsive

Author:
SAI BENDE

11 months ago

7.3k
Very simple navbar

Author:
Arya

1 year ago

11.3k
Navbar compoent

Author:
Amit Pachange

1 year ago

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

Author:
TailwindFlex

2 years ago

14.9k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

8 months ago

5k
Tailwindflex navbar

Author:
Amit Pachange

1 year ago

13.6k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

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

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

Author:
Vikram Choudhary

1 year ago

5.6k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

7.1k
Navbar
Navbar for primary menu

Author:
Anonymous

7 months ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.9