Avatar Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!-- Avatar Menu -->
<div class="relative inline-block">
  <button
    id="avatar-button"
    class="relative flex items-center justify-center w-12 h-12 rounded-full hover:ring-4 hover:ring-blue-100 transition-all focus:outline-none"
    onclick="toggleDropdown('avatar-menu')"
    aria-expanded="true"
  >
    <img
      src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop&crop=faces"
      alt="User avatar"
      class="w-11 h-11 rounded-full object-cover border-2 border-white shadow-md"
    />
    <!-- Online Status -->
    <span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full"></span>
  </button>

  <div
    id="avatar-menu"
    class="hidden absolute right-0 z-20 mt-2 w-72 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden"
  >
    <!-- Profile Header -->
    <div class="relative p-6 text-center bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600">
      <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
      <div class="relative">
        <img
          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop&crop=faces"
          alt="User avatar"
          class="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg mx-auto mb-3"
        />
        <h3 class="text-lg font-bold text-white">Marcus Thompson</h3>
        <p class="text-blue-100 text-sm">Senior Developer</p>
        <div class="flex items-center justify-center gap-2 mt-2">
          <span class="px-2 py-0.5 text-xs font-medium bg-white/20 text-white rounded-full">Pro</span>
          <span class="px-2 py-0.5 text-xs font-medium bg-white/20 text-white rounded-full">Verified</span>
        </div>
      </div>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-3 divide-x divide-gray-100 border-b border-gray-100">
      <div class="py-3 text-center">
        <p class="text-xl font-bold text-gray-900">247</p>
        <p class="text-xs text-gray-500">Followers</p>
      </div>
      <div class="py-3 text-center">
        <p class="text-xl font-bold text-gray-900">89</p>
        <p class="text-xs text-gray-500">Projects</p>
      </div>
      <div class="py-3 text-center">
        <p class="text-xl font-bold text-gray-900">1.2k</p>
        <p class="text-xs text-gray-500">Downloads</p>
      </div>
    </div>

    <!-- Menu Items -->
    <div class="py-2">
      <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
        </svg>
        <span>View Profile</span>
      </a>
      <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
        </svg>
        <span>Favorites</span>
      </a>
    </div>

    <!-- Divider -->
    <div class="border-t border-gray-100"></div>

    <!-- Sign Out -->
    <div class="py-2">
      <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
        </svg>
        <span>Sign out</span>
      </a>
    </div>
  </div>
</div>

<script>
  function toggleDropdown(id) {
    const menu = document.getElementById(id);
    menu.classList.toggle('hidden');
    const button = document.getElementById('avatar-button');
    const isExpanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !isExpanded);
  }

  document.addEventListener('click', function(event) {
    const dropdown = document.querySelector('.relative.inline-block');
    const button = document.getElementById('avatar-button');
    const menu = document.getElementById('avatar-menu');
    if (!dropdown.contains(event.target)) {
      menu.classList.add('hidden');
      button.setAttribute('aria-expanded', 'false');
    }
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Avatar Menu

User avatar dropdown menu.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Avatar trigger
- Account / settings links

## Usage

```bash
npx devsnips add Tailwind/Components/Dropdowns/avatar-menu
```

Copy from `code.html`.

## Customization

- Avatar size, menu width, item styles

## Accessibility

- Trigger needs an accessible name; manage focus for the menu

## Dependencies

- Tailwind CSS; small JS if script is present

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`