Command menu

Command menu creates keyboard accessible popover with user defined options to choose / navigate through. It offers quick access to site pages, actions and more...

It is fully customisable with options defined in a JS locale object and allow to add unlimited options to be displayed within with JS options object. Both objects can be defined in separate JS files. Pages can use separate options to display pages & actions only accessible on that page.

Examples (1)
Example Code
<as-command-menu options="options" keys="Meta+K" locale="locale"></as-command-menu>
Properties (3)
Property name Description Type
options Required: Name of the JS variable that holds array of options objects. Can be defined anywhere, as long as it is accessible on the page with Command menu component.

Example of option object:
{
title: "Mine aftaler",
keywords: "alle mine aftaler",
shortcut: "Alt+A",
section: "Sager",
handler: () => {
setTimeout(() => location.href = "https://google.com"}, 100)
}
}
Command menu allow to search by typing option name. Search is performed on text from title and keywords keys 		string
locale Required: Name of the JS variable that holds locale objects. Can be defined anywhere, as long as it is accessible on the page with Command menu component.

Locale object:
{
navigate: "Navigate",
select: "Select",
dismiss: "Dismiss",
drag: "Hold & drag",
reset: "Reset",
open: "Menu",
placeholder: "Type a command or search...",
nohits: "No results for",
hint: "Search tips: some search terms require an exact match. Try typing the entire command name, or use a different word or phrase."
} 		string
keys Required: Define keyboard shortcut to open command menu dialog. Can be any combination, though safest is using Meta key + another key. Meta is Command or Windows or any other meta modifier key (e.g. on Chromebooks) string
Files