https://github.com/oskarrough/command-menu
A command menu for the web. Autocomplete adventures
https://github.com/oskarrough/command-menu
command-palette web-components
Last synced: about 2 months ago
JSON representation
A command menu for the web. Autocomplete adventures
- Host: GitHub
- URL: https://github.com/oskarrough/command-menu
- Owner: oskarrough
- Created: 2021-08-02T12:49:55.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-06-23T21:59:01.000Z (almost 3 years ago)
- Last Synced: 2025-02-10T08:31:52.221Z (over 1 year ago)
- Topics: command-palette, web-components
- Language: JavaScript
- Homepage: https://command-menu.pages.dev/
- Size: 64.5 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Command Menu
A command menu, palette for the web. Similar to ctrl+k or ctrl+p in code editors.
## Features
- is a web component
- accessible UI (hopefully)
- fuzzy search using [farzher/fuzzysort](https://github.com/farzher/fuzzysort)
- optional modal UI with keybindings
- can call arbitrary commands and functions
- attempted to make focus navigation feel natural
## How to use
Since it's not on npm yet you'll have to copy the files for now. Also see index.html for a complete example.
1. Include the script
2. Include the styles
3. Add `` element to your page
4. Pass it your commands like so:
```js
/**
* @typedef {Object} Command
* @property {String} title - The title of the command
* @property {String} [subtitle] - A description of the command
* @property {String} [shortcut] - A keyboard shortcut, e.g. "Ctrl+K"
* @property {Function} [action] - The function to call when the command is selected
* @property {Array} [children] - A list of child commands
*/
const commands = [
{title: 'Play track', shortcut: 'p', },
{title: 'Stop track', shortcut: 'n'},
{title: 'Help', action: () => { confirm('Send help please') }},
{title: 'Typography', children: [{title: 'Bold'}, {title: 'Italic'}]}
]
document.querySelector('command-menu').list = commands
```
## References
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
- https://www.w3.org/WAI/tutorials/menus/application-menus/#keyboard-behavior
- https://github.com/Heydon/inclusive-menu-button/blob/master/inclusive-menu-button.js
- https://headlessui.com/react/combobox#combobox
- https://developers.raycast.com/basics/prepare-an-extension-for-store#ui-ux-guidelines
- https://github.com/pacocoursey/cmdk