Context Menu Folder

<div class='fm'><div class='fm-t' id='fmt' tabindex='0'><span class='fm-i'><svg width='34' height='34' viewBox='0 0 24 24' fill='#fff'><path d='M3 7.5A2.5 2.5 0 0 1 5.5 5h3.6c.5 0 1 .2 1.3.6L11.6 7H18.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/></svg></span><b>Card Component</b><small>Right-click or tap</small></div><ul class='fm-m' id='fmm' role='menu'><li role='menuitem'>Open</li><li role='menuitem'>Rename</li><li role='menuitem'>Duplicate</li><li class='d' role='menuitem'>Delete</li></ul></div>

.fm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111;user-select:none}.fm-t{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;outline:0}.fm-i{display:grid;place-items:center;width:88px;height:88px;border-radius:26px;background:#a5f3fc;box-shadow:0 6px 18px rgba(34,211,238,.25);transition:transform .2s}.fm-t:active .fm-i{transform:scale(.94)}.fm-t b{font-size:13px;font-weight:500}.fm-t small{font-size:12px;color:#c4c4c4}.fm-m{display:none;position:absolute;left:50%;top:100%;z-index:5;min-width:150px;margin:6px 0 0 -75px;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);transform-origin:top;animation:fm-in .15s ease}.fm-m.on{display:block}.fm-m li{padding:8px 11px;font-size:13.5px;border-radius:8px;cursor:pointer}.fm-m li:hover{background:#f4f4f4}.fm-m li.d{color:#dc2626}.fm-m li.d:hover{background:#fef2f2}@keyframes fm-in{from{opacity:0;transform:scale(.96)}}

const t=document.getElementById('fmt'),m=document.getElementById('fmm');const T=v=>m.classList.toggle('on',v);t.addEventListener('contextmenu',e=>{e.preventDefault();T(true)});t.addEventListener('click',()=>T(!m.classList.contains('on')));m.addEventListener('click',()=>T(false));document.addEventListener('mousedown',e=>{if(!t.parentNode.contains(e.target))T(false)});document.addEventListener('keydown',e=>{if(e.key==='Escape')T(false)});