Notifications

3 new
MS

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

EW

Emma Wilson commented on Homepage Redesign

45 minutes ago

JM

James Miller mentioned you in Sprint Planning

2 hours ago

SC

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

DK

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Dropdowns

Dropdown menu examples.

Basic Dropdown

<div class="relative inline-block" x-data="dropdown" @click.outside="close()">
  <button @click="toggle()" class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Open Dropdown</button>
  <div id="basicDropdown" class="absolute left-0 top-full mt-1 w-48 bg-gray-800 rounded-xl shadow-lg border border-gray-600 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Profile</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Settings</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Billing</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-red-600 hover:bg-red-500/10 transition-colors">Sign Out</a>
  </div>
</div>

Dropdown with Icons

<div class="relative inline-block" x-data="dropdown" @click.outside="close()">
  <button @click="toggle()" class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Open Dropdown</button>
  <div id="iconDropdown" class="absolute left-0 top-full mt-1 w-56 bg-gray-800 rounded-xl shadow-lg border border-gray-600 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">
      <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="..."/></svg>
      Profile
    </a>
    <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">
      <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="..."/></svg>
      Settings
    </a>
  </div>
</div>

Dropdown with Dividers

<div class="relative inline-block" x-data="dropdown" @click.outside="close()">
  <button @click="toggle()" class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Open Dropdown</button>
  <div class="absolute left-0 top-full mt-1 w-48 bg-gray-800 rounded-xl shadow-lg border border-gray-600 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">New File</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Open Folder</a>
    <div class="border-t border-gray-700"></div>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Save</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Save As...</a>
    <div class="border-t border-gray-700"></div>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Export</a>
  </div>
</div>

Right-Aligned Dropdown

<div class="relative inline-block" x-data="dropdown" @click.outside="close()">
  <button @click="toggle()" class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Open Dropdown</button>
  <div class="absolute right-0 top-full mt-1 w-48 bg-white rounded-xl shadow-lg border border-gray-600 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Edit</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700/50 transition-colors">Duplicate</a>
    <div class="border-t border-gray-700"></div>
    <a href="#" class="block px-4 py-2.5 text-sm text-red-600 hover:bg-red-500/10 transition-colors">Delete</a>
  </div>
</div>