Navigation profileuserdropdown

User Nav Dropdown

Header link showing user avatar and quick actions menu.

JS
Your Profile Settings
Logout

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { UserNavDropdown } from 'astro-component-kit';
---

<UserProfileNav>Content</UserProfileNav>
--- import { UserNavDropdown } from 'astro-component-kit'; --- <UserProfileNav>Content</UserProfileNav>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/UserNavDropdown.astro and paste the following code:

astro 
---
---
<div class="u-nav">
  <div class="u-avatar">JS</div>
  <div class="u-menu">
    <a href="#">Your Profile</a>
    <a href="#">Settings</a>
    <hr />
    <a href="#" class="logout">Logout</a>
  </div>
</div>
<style>
  .u-nav { position: relative; cursor: pointer; }
  .u-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; border: 2px solid #080b14; }
  .u-menu { position: absolute; top: 120%; right: 0; background: #0f172a; border: 1px solid #334155; border-radius: 12px; width: 180px; display: none; flex-direction: column; overflow: hidden; z-index: 10; }
  .u-nav:hover .u-menu { display: flex; }
  .u-menu a { padding: 0.75rem 1rem; font-size: 0.85rem; color: #94a3b8; text-decoration: none; }
  .u-menu a:hover { background: rgba(255,255,255,0.05); color: #fff; }
  .logout { color: #f87171 !important; }
  hr { border: none; border-top: 1px solid #334155; margin: 0; }
</style>
--- --- <div class="u-nav"> <div class="u-avatar">JS</div> <div class="u-menu"> <a href="#">Your Profile</a> <a href="#">Settings</a> <hr /> <a href="#" class="logout">Logout</a> </div> </div> <style> .u-nav { position: relative; cursor: pointer; } .u-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; border: 2px solid #080b14; } .u-menu { position: absolute; top: 120%; right: 0; background: #0f172a; border: 1px solid #334155; border-radius: 12px; width: 180px; display: none; flex-direction: column; overflow: hidden; z-index: 10; } .u-nav:hover .u-menu { display: flex; } .u-menu a { padding: 0.75rem 1rem; font-size: 0.85rem; color: #94a3b8; text-decoration: none; } .u-menu a:hover { background: rgba(255,255,255,0.05); color: #fff; } .logout { color: #f87171 !important; } hr { border: none; border-top: 1px solid #334155; margin: 0; } </style>

Quick Info

Category
Navigation
Filename
UserNavDropdown.astro
Dependencies
None — pure Astro + CSS
Tags
profileuserdropdown