kmenu
🌈 An animated and accessible command menu
Start new thread
Harsh Singh

kmenu - An animated and accessible command menu

by
kmenu
•
As you scale, it's a challenge to make sure the users don't feel overwhelmed and are able to navigate the application seamlessly. That's where command menus come in! This library allows you to easily configure and add in a command palette on your website.

Add a comment

Replies

Best
Harsh Singh
Maker
What's up Product Hunt? 👋 Today's my birthday, and I have a gift for you. In the age of modern web design, a huge leap in web accessibility and UX are command menus. First popularized by Jon Skinner in Sublime Text and later adopted by Visual Studio Code, command menus have now made their way to our web applications. The main purpose they aim to solve is providing quick and easy access to all the commands inside your application. As opposed to clicking each menu and searching for a feature, or wasting time moving around your website, users can now just click a few buttons on their keyboard and search for whatever they want. Isn't that amazing? The underlying problem I saw with present solutions is that while they work, they're not always the best—in other words, the bar for command menus is pretty low right now. CommandBar is a nice and popular solution used on websites such as Netlify, however it's not free and it has a huge watermark. There were other libraries for the React ecosystem which either just didn't feel right, or were too hard to customize to my needs. To satisfy my inner developer ego, and to create an awesome public library for everyone with a similar use-case, I built kmenu. We've all felt that one perfect UI interaction that makes a website memorable because it just feels so damn good to use. This library, while being accessible, is also fully animated and feels awesome to use. I also tend to dislike proprietary libraries just as much as the next person, so this is library is entirely free and open-source. The great thing about that is, if you want to add a particular functionality to the palette, you can always create your own fork or send a pull request to improve mines. In final words, I would like to thank everyone who tested out this project in an early stage and gave me feedback. Now it's your turn—give it a shot, and let me know what you think about it. If you'd like to experiment with it, it should take you just a few minutes to configure and add this to your own sites.
Marco Ancona
@harsh_singh19 congrats, looks nice! This might be a special use case, but I would like to see a way to compute commands on the fly rather than having only a fixed initial list. Maybe a hook to be called while you type.
Akash Joshi
@harsh_singh19 @marco_ancona2 hmmm, maybe there could be a callback from the input, based on which data could be added to the original list of items.
Harsh Singh
Maker
@marco_ancona2 hello Marco, thanks for trying it out. I'm glad you like it! Your suggestion is very nice—I have opened an issue on GitHub for this :) Update 08/14: kmenu supports this, and even has a custom loading state while you fetch dynamic info.
Uladzimiro
@marco_ancona2 probably this is something you may find useful https://jumptomenu.com/ - it gathers commands while users use the host app.
Harsh Singh
Maker
@marco_ancona2 @uladzimiro I believe you can still push commands onto an array, but something that I've set as a milestone for our official v1 release is a useCommands hook which can do exactly that.
Akash Joshi
Happy Birthday @harsh_singh19 ! This menubar looks great. From my brief trial of it, it was smooth af. Can't wait to use it on my next app!
Harsh Singh
Maker
@akash_joshi Thanks for the wishes! I'm really glad you enjoyed using it, and I'm looking forward to the amazing things you build with it :)