Keyboard Shortcuts UI (cmd+k) For The Web – Ninja Keys

Ninja Keys is a JavaScript library that adds ⌘+k (ctrl+k on Windows) search UI containing custom hotkeys to your web app.

Works with Vanilla JS or popular JavaScript frameworks like Vue and React.

How to use it:

1. Install and import the Ninja Keys.

# NPM
$ npm i ninja-keys

import 'ninja-keys';

// or
<script type="module" src="https://unpkg.com/ninja-keys?module"></script>

2. Add the <ninja-keys> custom element to the page. All possible attributes:

• placeholder: “Type a command or search”
• disableHotkeys: “false”
• hideBreadcrumbs: “false”
• openHotkey: “cmd+k,ctrl+k”
• navigationUpHotkey: “up,shift+tab”
• navigationDownHotkey: “down,tab”
• closeHotkey: “esc”
• goBackHotkey: “backspace”
• selectHotkey: “enter”
• hotKeysJoinedView: “false”
• noAutoLoadMdIcons: “false”

<ninja-keys placeholder="Custom Placeholder"></ninja-keys>

3. Define your own hotkeys.

const hotkeys = [
  {
    id: "myHotkey-1",
    title: "Hot Key 01",
    hotkey: "cmd+h",
    icon: "custom icon html here",
    mdIcon: "home", // Material Icon
    keywords: "home", // keyword
    handler: () => {
      console.log("navigation to home");
    }
  },
  {
    id: "Theme",
    title: "Change theme...",
    mdIcon: "desktop_windows",
    children: [
      {
        id: "Light Theme",
        title: "Change theme to Light",
        mdIcon: "light_mode",
        handler: () => {
          console.log("theme light");
        }
      },
      {
        id: "Dark Theme",
        title: "Change theme to Dark",
        mdIcon: "dark_mode",
        keywords: "lol",
        handler: () => {
          console.log("theme dark");
        }
      }
    ]
  }
];

4. Initialize the cmd+k search UI.

const ninja = document.querySelector("ninja-keys");
ninja.data = hotkeys;

5. Open the interface manually.

ninja.open();
// or
ninja.open({ parent: 'Theme' })

6. Change the theme to ‘Dark’.

<ninja-keys class="dark"></ninja-keys>

7. Add a footer to the interface.

<ninja-keys> 
  <slot name="footer">Must custom footer</slot>
</ninja-keys>

Changelog:

v1.2.2 (07/02/2022)

• rendering for multiple key options

v1.2.0 (04/21/2022)

• Clean up hotkeys on disconnect
• Export css variable of content zIndex

01/17/2022

• Adds -webkit-backdrop-filter property for Safari

01/08/2022

• Fixed for vue2 observer issue

12/11/2021

• add placeholder text color variable and style customize for input element