Overlays popovermenuglass
Glass Popover
A small floating menu that appears near a trigger element.
Preview
Edit Account
Billing
Logout
Usage
Copy the full block below to use this component with its imports.
astro
---
import { GlassPopover } from 'astro-component-kit';
---
<PopoverMenuGlass>Content</PopoverMenuGlass> ---
import { GlassPopover } from 'astro-component-kit';
---
<PopoverMenuGlass>Content</PopoverMenuGlass> Manual Installation
If you are not using the npm package, create a new file src/components/lib/GlassPopover.astro and paste the following code:
astro
---
---
<div class="popover">
<div class="pop-inner">
<div class="pop-item">Edit Account</div>
<div class="pop-item">Billing</div>
<hr />
<div class="pop-item logout">Logout</div>
</div>
</div>
<style>
.popover { width: 180px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.pop-item { padding: 8px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; }
.pop-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.logout { color: #f87171 !important; }
hr { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; }
</style> ---
---
<div class="popover">
<div class="pop-inner">
<div class="pop-item">Edit Account</div>
<div class="pop-item">Billing</div>
<hr />
<div class="pop-item logout">Logout</div>
</div>
</div>
<style>
.popover { width: 180px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.pop-item { padding: 8px 12px; border-radius: 8px; color: #94a3b8; font-size: 0.85rem; cursor: pointer; }
.pop-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.logout { color: #f87171 !important; }
hr { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 6px 0; }
</style>
Quick Info
- Category
- Overlays
- Filename
GlassPopover.astro- Dependencies
- None — pure Astro + CSS
- Tags
- popovermenuglass