Keyboard shortcuts interface for your website. Work with vanilla JS, Vue, and React.

keyboard shortcuts ux, keyboard shortcuts best practices, uipath keyboard shortcuts activity, uipath keyboard input, keyboard ui, uipath comment out shortcut

Why the name “Ninja”?

Because it appears out of nowhere and performs any actions quickly. Or it allows users to become a keyboard ninja 🙃

Features

• Navigating with the keyboard
• Light and dark theme built-in
• Supported embedded icons from the physical font can support custom SVG icons too.
• Nested menu can use either a tree or flat data structure
• Automatic register of your shortcuts
• Root search, for example, if you search for “Dark” you will find it in the “Theme” submenu
• CSS variable to customize the display
• Customizable hotkeys for opening/closing etc. Choose what fits your website the most.

How to make use of it:

1. Install and import 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 custom <ninja-keys> element to the page.

<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. Configure the search UI cmd + k.

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>

Attributes

Data

Array of INinjaAction – interface properties below

Methods

CSS variables

Keyboard Shortcuts UI (cmd+k) For The Web, Ninja Keys Plugin/Github, keyboard shortcut design, ui copywriting

See Demo And Download

Official Website(ssleptsov): Click Here

This superior jQuery/javascript plugin is developed by ssleptsov. For extra Advanced usage, please go to the official website.