Component
Profile Navigation
User profile dropdown with header, menu items, and sign out action. Perfect for authenticated app navigation.
- Component
- Tailwind
- HTML
- MIT
What it does
Capabilities
- Profile avatar button
- Gradient header with user info
- Menu navigation items
- Sign out action
- Click-outside dismiss
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/navigation/profile-navigation/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Navigation/profile-navigation Tailwind/Components/Navigation/profile-navigation <div class="relative inline-block">
<button id="profile-btn" class="flex items-center gap-3 p-2 rounded-xl hover:bg-gray-100 transition-colors" aria-expanded="false">
<div class="w-10 h-10 bg-gradient-to-br from-violet-400 to-purple-600 rounded-full flex items-center justify-center">
<span class="text-white font-medium">JD</span>
</div>
<div class="hidden md:block text-left">
<p class="text-sm font-medium text-gray-900">John Doe</p>
<p class="text-xs text-gray-500">[email protected]</p>
</div>
<svg class="w-4 h-4 text-gray-400 hidden md:block" 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"/>
</svg>
</button>
<div id="profile-dropdown" class="absolute right-0 top-full mt-2 w-72 bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden opacity-0 invisible transition-all duration-200 z-50">
<!-- Header -->
<div class="p-4 bg-gradient-to-r from-violet-500 to-purple-600">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
<span class="text-white font-bold text-lg">JD</span>
</div>
<div>
<p class="text-white font-semibold">John Doe</p>
<p class="text-white/80 text-sm">[email protected]</p>
</div>
</div>
</div>
<!-- Menu Items -->
<div class="p-2">
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-xl transition-colors">
<svg class="w-5 h-5 text-gray-400" 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"/>
</svg>
<span>My Profile</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-xl transition-colors">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
<span>Saved Items</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-xl transition-colors">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>Billing</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-xl transition-colors">
<svg class="w-5 h-5 text-gray-400" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<span>Settings</span>
</a>
</div>
<!-- Footer -->
<div class="p-2 border-t border-gray-100">
<a href="#" class="flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-xl 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"/>
</svg>
<span>Sign Out</span>
</a>
</div>
</div>
</div># Profile Navigation
Profile area navigation.
## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/profile-navigation
```
Copy from `code.html`.
## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md` 68 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/navigation/profile-navigation I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/navigation/profile-navigation/ Install: npx devsnips add Tailwind/Components/Navigation/profile-navigation This is the Profile Navigation — User profile dropdown with header, menu items, and sign out action. Perfect for authenticated app navigation. 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/navigation/profile-navigation