Glass context menu
Press the photo and a glass menu springs open while the picture shrinks slightly and the background blurs.
Settings
Code
<div class="uv-gcm"><button type="button" class="ph" aria-haspopup="menu" aria-expanded="false"><span class="im"></span><span class="cp">Sunset in Cádiz</span></button><div class="mn" role="menu"><button type="button" role="menuitem" style="--i:0"><span>Copy</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16H8"/></svg></button><button type="button" role="menuitem" style="--i:1"><span>Share</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V3.5M7.5 8L12 3.5 16.5 8M5 12v6.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V12"/></svg></button><button type="button" role="menuitem" style="--i:2"><span>Favorite</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button><button type="button" role="menuitem" class="dg" style="--i:3"><span>Delete</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5"/></svg></button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Long press and right click menus are where the glass material shines, floating above the content they act on. Clicking, right clicking or pressing the photo card scales it down a touch, dims and blurs the background, and springs open a frosted menu from the corner with copy, share, favorite and a red delete option, each item fading in with a short stagger.
The menu is a real menu with menu items, focus moves into it on open and Escape closes it and returns focus to the photo. Adjust blur and tint for your wallpaper and swap the gradient image for any photo.