Home
Razeem Razak
Navbar with Dropdown

Navbar with Dropdown

Navbar with dropdown

This tailwind example is contributed by Razeem Razak, on 16-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Razeem Razak

Fork Fullscreen

<nav class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="relative flex items-center justify-between h-16">
        
        <div class="flex-shrink-0 flex items-center">
          <span class="text-xl font-bold text-blue-700">HMS</span>
        </div>

<div class="hidden sm:block sm:ml-6">
          <ul class="flex space-x-4 text-gray-700 font-medium items-center">
            <li><a href="#" class="hover:text-blue-600 px-3 py-2 rounded-md text-sm">Home</a></li>
            <li><a href="#" class="hover:text-blue-600 px-3 py-2 rounded-md text-sm">Our Story</a></li>
            <li><a href="#" class="hover:text-blue-600 px-3 py-2 rounded-md text-sm">Departments</a></li>
            <li><a href="#" class="hover:text-blue-600 px-3 py-2 rounded-md text-sm">Health Packages</a></li>
            <li><a href="#" class="hover:text-blue-600 px-3 py-2 rounded-md text-sm">Doctors</a></li>
            <li><a href="#" class="hover:text-blue-600 px-3 py-2 rounded-md text-sm">Careers</a></li>

<li class="relative group">
              <button class="hover:text-blue-600 px-3 py-2 rounded-md text-sm flex items-center">
                More Info
                <svg class="ml-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd" />
                </svg>
              </button>

<ul
                class="absolute left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150">
                <li><a href="#" class="block px-4 py-2 hover:bg-blue-50 hover:text-blue-600">Insurance Partners</a>
                </li>
                <li><a href="#" class="block px-4 py-2 hover:bg-blue-50 hover:text-blue-600">Patient Guidelines</a></li>
                <li><a href="#" class="block px-4 py-2 hover:bg-blue-50 hover:text-blue-600">Testimonials</a></li>
                <li><a href="#" class="block px-4 py-2 hover:bg-blue-50 hover:text-blue-600">FAQs</a></li>
              </ul>
            </li>
          </ul>
        </div>

<div class="flex items-center gap-3">
          <a href="#"
            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 text-sm font-medium">Book Now</a>

<div class="sm:hidden">
            <button id="mobile-menu-button" type="button"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
              <span class="sr-only">Open main menu</span>
              <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

<div class="sm:hidden hidden" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="block px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium">Home</a>
        <a href="#" class="block px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium">Our
          Story</a>
        <a href="#" class="block px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium">Departments</a>
        <a href="#"
          class="block px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium">Health
          Packages</a>
        <a href="#" class="block px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium">Doctors</a>
        <a href="#" class="block px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium">Careers</a>

<div class="relative">
          <button
            class="w-full text-left px-3 py-2 text-gray-900 rounded-md hover:bg-gray-100 text-base font-medium flex items-center justify-between mobile-dropdown-trigger">
            More Info
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd" />
            </svg>
          </button>
          <div class="hidden pl-4 py-2 mobile-dropdown-content">
            <a href="#" class="block py-1 hover:text-blue-600">Insurance Partners</a>
            <a href="#" class="block py-1 hover:text-blue-600">Patient Guidelines</a>
            <a href="#" class="block py-1 hover:text-blue-600">Testimonials</a>
            <a href="#" class="block py-1 hover:text-blue-600">FAQs</a>
          </div>
        </div>

// Mobile dropdown toggle
    document.querySelectorAll('.mobile-dropdown-trigger').forEach(trigger => {
      trigger.addEventListener('click', function () {
        const content = this.nextElementSibling;
        content.classList.toggle('hidden');
      });
    });
  </script>

Related Examples

Very simple navbar

Author:
Arya

2 years ago

13.5k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

4 months ago

832
htmlbasics

Author:
Anonymous

3 months ago

458
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

2 years ago

26.9k
websitee

Author:
Anonymous

3 months ago

285
Navigation bar
Navbar

Author:
Aman kumar

1 year ago

4k
Apple Dock Navigation Bar

Author:
Cristian

9 months ago

1.4k
flower
by salvator

Author:
Baraka Salvator

4 months ago

721
Navbar
Navbar for primary menu

Author:
Anonymous

1 year ago

5.7k
Fixed navbar

Author:
Oliver Hansen

2 years ago

26.4k
htmlcolours

Author:
Anonymous

3 months ago

272
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

11 months ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components