Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Dropdowns

Dropdown menu examples.

Basic Dropdown

Profile Settings Billing Sign Out

<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-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Profile</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Settings</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Billing</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors">Sign Out</a>
  </div>
</div>

Dropdown with Icons

Profile Settings Messages Boost

<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-56 bg-white rounded-xl shadow-xl border border-gray-200 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-700 hover:bg-gray-50 transition-colors">
      <svg class="w-4 h-4 text-gray-400" 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-700 hover:bg-gray-50 transition-colors">
      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="..."/></svg>
      Settings
    </a>
  </div>
</div>

Dropdown with Dividers

New File Open Folder

Save Save As...

Export Import

<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-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">New File</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Open Folder</a>
    <div class="border-t border-gray-100"></div>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Save</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Save As...</a>
    <div class="border-t border-gray-100"></div>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Export</a>
  </div>
</div>

Right-Aligned Dropdown

Edit Duplicate Archive

Delete

<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-xl border border-gray-200 overflow-hidden z-50" x-show="open" x-cloak>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Edit</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors">Duplicate</a>
    <div class="border-t border-gray-100"></div>
    <a href="#" class="block px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors">Delete</a>
  </div>
</div>