Responsive Navbar Example

A working example of the navbar

This tailwind example is contributed by Noob, on 25-Aug-2022. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 17.9k 14

<nav class="flex flex-wrap items-center justify-between p-3 bg-teal-200/20">
    <img src="https://tailwindflex.com/public/favicon.ico" class="h-10 w-10" alt="" />
    <div class="flex md:hidden">
        <button id="hamburger">
          <img class="toggle block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" width="48" height="48" />
          <img class="toggle hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" width="48" height="48" />
        </button>
    </div>
    <div
        class="toggle hidden w-full md:w-auto md:flex text-right text-bold mt-5 md:mt-0 border-t-2 border-teal-900 md:border-none">
        <a href="#"
            class="block md:inline-block text-teal-900 hover:text-teal-500 px-3 py-3 border-b-2 border-teal-900 md:border-none">Home
        </a>
        <a href="#"
            class="block md:inline-block text-teal-900 hover:text-teal-500 px-3 py-3 border-b-2 border-teal-900 md:border-none">Products
        </a>
        <a href="#"
            class="block md:inline-block text-teal-900 hover:text-teal-500 px-3 py-3 border-b-2 border-teal-900 md:border-none">Pricing
        </a>
        <a href="#"
            class="block md:inline-block text-teal-900 hover:text-teal-500 px-3 py-3 border-b-2 border-teal-900 md:border-none">Contact
        </a>
    </div>
    <a href="#"
        class="toggle hidden md:flex w-full md:w-auto px-4 py-2 text-right bg-teal-900 hover:bg-teal-500 text-white md:rounded">Create
        Account
    </a>
</nav>
<script>
    document.getElementById("hamburger").onclick = function toggleMenu() {
        const navToggle = document.getElementsByClassName("toggle");
        for (let i = 0; i < navToggle.length; i++) {
          navToggle.item(i).classList.toggle("hidden");
        }
      };
</script>

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

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

Eamon Carter

2 years ago

28.9k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.4k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.5k
Semi transparent navbar

Laurits

3 years ago

16.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Very simple navbar

Arya

3 years ago

15k
Fixed navbar

Oliver Hansen

3 years ago

28.5k
Features list with icons

L.J. Weber

3 years ago

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

TailwindFlex

4 years ago

20.5k
Navigation Bar Responsive

SAI BENDE

2 years ago

11.2k
navigation
tailwind navigation pills

Anonymous

2 years ago

9.6k
Navbar
Navbar for primary menu

Anonymous

2 years ago

6.9k
Simple navbar
semi transparent

Laurits

3 years ago

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

Vikram Choudhary

2 years ago

7.8k