Command Palette (⌘K)

<button class="cp-open" id="cpOpen">Press <kbd>⌘</kbd><kbd>K</kbd> to search</button>
<div class="cp-overlay" id="cpOverlay">
  <div class="cp-box">
    <div class="cp-input"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="none" stroke="#9099ad" stroke-width="2" stroke-linecap="round" d="M21 21l-4.3-4.3M11 18a7 7 0 100-14 7 7 0 000 14z"/></svg><input id="cpQuery" placeholder="Type a command or search…" autocomplete="off"></div>
    <ul class="cp-list" id="cpList"></ul>
    <div class="cp-foot"><span><kbd>↑</kbd><kbd>↓</kbd> navigate</span><span><kbd>↵</kbd> select</span><span><kbd>esc</kbd> close</span></div>
  </div>
</div>

*{box-sizing:border-box}
.cp-open{font-family:system-ui,sans-serif;background:#fff;border:1px solid #d8dce6;border-radius:10px;padding:11px 16px;color:#5a627a;font-size:14px;cursor:pointer}
.cp-open kbd{background:#eef0f6;border-radius:5px;padding:1px 6px;font-size:12px;margin:0 1px}
.cp-overlay{position:fixed;inset:0;background:rgba(15,20,40,.4);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:50}
.cp-overlay.on{display:flex}
.cp-box{width:520px;max-width:92vw;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(15,20,40,.35);overflow:hidden;font-family:system-ui,sans-serif;animation:cpin .15s ease}
@keyframes cpin{from{opacity:0;transform:translateY(-8px)}}
.cp-input{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid #eceef3}
.cp-input input{border:0;outline:0;font-size:16px;flex:1;color:#1a1f36}
.cp-list{list-style:none;margin:0;padding:8px;max-height:300px;overflow:auto}
.cp-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;cursor:pointer;color:#46506b;font-size:14px}
.cp-list li .ic{width:30px;height:30px;border-radius:8px;background:#f1f3f9;display:grid;place-items:center;font-size:14px}
.cp-list li.sel{background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff}
.cp-list li.sel .ic{background:rgba(255,255,255,.25)}
.cp-foot{display:flex;gap:16px;padding:11px 16px;border-top:1px solid #eceef3;font-size:12px;color:#9099ad}
.cp-foot kbd{background:#eef0f6;border-radius:4px;padding:1px 5px;margin-right:2px}
.cp-empty{padding:24px;text-align:center;color:#9099ad;font-size:14px}

var data=[['🏠','Go to Dashboard'],['📊','View Analytics'],['👤','Account Settings'],['💳','Billing & Plans'],['📁','Open Projects'],['🔔','Notifications'],['🌙','Toggle Dark Mode'],['🚪','Log out']];
var overlay=document.getElementById('cpOverlay'),input=document.getElementById('cpQuery'),list=document.getElementById('cpList'),sel=0,results=[];
function render(){
  var q=input.value.toLowerCase();
  results=data.filter(function(d){return d[1].toLowerCase().indexOf(q)>-1});
  list.innerHTML=results.length?results.map(function(d,i){return '<li class="'+(i===sel?'sel':'')+'" data-i="'+i+'"><span class="ic">'+d[0]+'</span>'+d[1]+'</li>'}).join(''):'<div class="cp-empty">No results</div>';
  [].forEach.call(list.querySelectorAll('li'),function(li){li.onclick=function(){choose(+li.dataset.i)}});
}
function choose(i){if(results[i]){input.value='';close();}}
function open(){overlay.classList.add('on');input.value='';sel=0;render();setTimeout(function(){input.focus()},50)}
function close(){overlay.classList.remove('on')}
document.getElementById('cpOpen').onclick=open;
input.oninput=function(){sel=0;render()};
overlay.onclick=function(e){if(e.target===overlay)close()};
document.addEventListener('keydown',function(e){
  if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();open();return}
  if(!overlay.classList.contains('on'))return;
  if(e.key==='Escape')close();
  if(e.key==='ArrowDown'){e.preventDefault();sel=Math.min(sel+1,results.length-1);render()}
  if(e.key==='ArrowUp'){e.preventDefault();sel=Math.max(sel-1,0);render()}
  if(e.key==='Enter'){e.preventDefault();choose(sel)}
});