<command-menu>

This is how it works out of the box.

Features

• Items can be navigated with focus
• As well as ↑↓ to move up and down
• ←→ to move in and out
• Interacting (focusing, clicking, typing) will show the commands
• Pressing enter will trigger any action() property on the command
• Fuzzy search
• Make it modal by setting the modal attribute
• If modal, Command/Ctrl+k to open, ESC to dismiss
• Flexible structure for building nested commands

Or... Open modal command menu

But still, why?

• Works anywhere as a web component (most command menus/palettes are written with and for frameworks)
• Only one dependency (the fuzzy search library)
• Easier to style than a select and possibly even better UX

Want or to-do list

• Close on click outside? Maybe not
• Always keep the search input focused while browsing?
• Better accessibility, review aria roles

How to

• Load the script
• Create a command-menu HTML element
• Using javascript, target the element and set the `commands` property to an array of commands