devsnips
Search docs, APIs, guides…

Component

Status Menu

User status selector dropdown with active, away, busy, offline, and do not disturb options with animated indicators.

  • Component
  • Tailwind
  • HTML
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/dropdowns/status-menu/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Dropdowns/status-menu
registry path: Tailwind/Components/Dropdowns/status-menu

Source

Implementation

code.html 
<!-- Status Menu -->
<div class="relative inline-block">
  <button
    id="status-button"
    class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
    onclick="toggleDropdown('status-menu')"
  >
    <span id="current-status" class="flex items-center gap-2">
      <span class="w-2.5 h-2.5 bg-emerald-500 rounded-full"></span>
      <span>Active</span>
    </span>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </button>

  <div
    id="status-menu"
    class="hidden absolute left-0 z-20 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden"
  >
    <div class="px-4 py-3 border-b border-gray-100">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Change Status</p>
    </div>

    <div class="py-2">
      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="active" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-emerald-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Active</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="away" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-amber-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Away</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="busy" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-red-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Busy</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="offline" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-gray-400 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Appear Offline</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>

    <div class="border-t border-gray-100 py-2">
      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-red-50 transition-colors" data-status="dnd" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-red-600 rounded-full relative">
            <span class="absolute inset-0 bg-red-600 rounded-full animate-ping opacity-75"></span>
          </span>
          <span class="text-sm font-medium text-gray-900">Do Not Disturb</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<script>
  function toggleDropdown(id) {
    document.getElementById(id).classList.toggle('hidden');
  }

  function setStatus(element) {
    const status = element.getAttribute('data-status');
    const statusDisplay = document.getElementById('current-status');
    
    const statusConfig = {
      'active': { color: 'bg-emerald-500', label: 'Active' },
      'away': { color: 'bg-amber-500', label: 'Away' },
      'busy': { color: 'bg-red-500', label: 'Busy' },
      'offline': { color: 'bg-gray-400', label: 'Appear Offline' },
      'dnd': { color: 'bg-red-600', label: 'Do Not Disturb' }
    };
    
    const config = statusConfig[status];
    
    statusDisplay.innerHTML = `
      <span class="w-2.5 h-2.5 ${config.color} rounded-full"></span>
      <span>${config.label}</span>
    `;
    
    document.querySelectorAll('.status-option').forEach(opt => {
      opt.classList.remove('bg-blue-50');
      opt.querySelector('.check-icon').classList.add('hidden');
    });
    
    element.classList.add('bg-blue-50');
    element.querySelector('.check-icon').classList.remove('hidden');
    
    toggleDropdown('status-menu');
  }

  document.addEventListener('click', function(event) {
    const container = document.querySelector('.relative.inline-block');
    if (!container.contains(event.target)) {
      document.getElementById('status-menu').classList.add('hidden');
    }
  });
</script>
124 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/dropdowns/status-menu
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/dropdowns/status-menu/

Install: npx devsnips add
Tailwind/Components/Dropdowns/status-menu

This is the Status Menu — User status selector dropdown with active, away, busy, offline, and do not disturb options with animated indicators.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/dropdowns/status-menu