Building CMD+K Menus in Webflow with Javascript

⌘+K menus are everywhere. For folks who don’t know what I’m talking about, it’s those Quick Action menus that pop up when you hit ctrl/cmd+k on modern apps these days.

Searching through Tailwind’s docs for that one flex property reference? ⌘+K to the rescue. Using Slack? You can’t live without ⌘+K.

So, how do we build something like that for a site made in Webflow?

Step 1:

First, we’ll need a wrapper div. Make sure its position is set to fixed. Go into the settings tab on the right-side pane and give it an ID as well. I’ll give it an ID of menu-wrapper.

Then, add another div and build out the menu in it as you’d like it to look. This is a pretty basic one I built for this demo.

Step 2:

Once you’re done building the menu, set the display property of the parent wrapper div to none.

Then add an Embed element inside the wrapper div, with this script.

<script>
  const menu = document.getElementById('menu-wrapper')
  document.addEventListener('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
      menu.style.display = 'flex'
    } else if (event.key === 'Escape') {
      menu.style.display = 'none'
    }
  })
</script>

Here, we’re listening for keydown events and checking if the keys pressed are the ones we’re interested in. If yes, we set the display property of the wrapper div to flex, and once the escape key is pressed, back to none.

Step 3:

Bundle it all together into a Symbol, and add it to all your other pages as well.

That’s all folks!

To try it out, here’s da link: https://external-data-75f7c3.webflow.io/cmd-k

As always, thanks for hanging out, hope you had fun.