Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<nav class="bg-white shadow-sm sticky top-0 z-50" x-data="{ open: false }">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">

<a href="/" class="text-xl font-bold text-blue-600">Brand</a>

<div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600">
        <a href="#" class="hover:text-blue-600 transition-colors">Home</a>
        <a href="#" class="hover:text-blue-600 transition-colors">About</a>
        <a href="#" class="hover:text-blue-600 transition-colors">Work</a>
        <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
          Contact
        </a>
      </div>

<button class="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100"
              @click="open = !open">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path x-show="!open" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          <path x-show="open" stroke-linecap="round" stroke-linejoin="round"
                stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
  </div>

<div class="md:hidden" x-show="open" x-transition>
    <div class="px-4 pt-2 pb-4 space-y-1 border-t border-gray-100">
      <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-50">Work</a>
    </div>
  </div>
</nav>