Clone Project

Command Menu (⌘ + K)

Description:  
Author 
Will Gibson
Organization 
Similar Projects
Oops! Something went wrong while submitting the form.
Description from Webflow:  
A keyboard-activated (⌘ + K) menu with arrow navigation. Had a ton of fun building this project and after some great feedback, wanted to put it out for the community. Most of the functionality comes from the page code in the <head> tag, here's a quick breakdown of the four sections, courtesy of ChatGPT: 1) Initialization: Waits for the HTML and CSS to load before identifying 'modal' and 'closeButton' elements through IDs. 2) Keyboard Toggle: Listens for 'Command/Control + K' key press, toggling the 'modal' element's visibility between 'display: none' and 'display: flex'. 3) Close Button: Assigns functionality to a 'closeButton' element, working seamlessly with the keyboard toggle. 4) Arrow Key Navigation: Disables default arrow key behavior and focuses navigation on modal links, customizing the focused state for accessibility. Exclude links by assigning them the 'ignoreLink' ID. Apply the 'modal' ID to the content container and 'closeButton' ID to the close element. Enjoy, Will
Tags from Webflow: 
modal,  javascript,  menu,  popup,  keyboard,  customcode,  code,  command,  navigation,  nav,  navbar

The best Webflow projects handpicked & delivered.

We search the entire Webflow showcase to find the most clone-worthy* websites.

*The kind of sites that make you say "wait... this is free?"
Sites will be complete, clean, and client ready.

Booyah! The first newsletter will go out early next week.
Oops! Something went wrong while submitting the form.

*The kind of sites that make you say "wait... this is free?" Sites will be complete, clean, and client ready.

Booyah! The first newsletter will go out early next week.
Oops! Something went wrong while submitting the form.
.