Keyboard Shortcuts Interface for Your Website Using Static HTML, Vanilla JS, Vue, and React

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 🙃


  • 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 i ninja-keys
import 'ninja-keys';
// or
<script type="module" src=""></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"); = hotkeys;

5. Open the interface manually.;
// or{ parent: 'Theme' })

6. Change the theme to “Dark”.

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

7. Add a footer to the interface.

  <slot name="footer">Must custom footer</slot>


placeholderType a command or search…Placeholder for search
disableHotkeysfalseIf attribute exist will register all hotkey for all actions
hideBreadcrumbsfalseHide breadcrumbs on header if true
openHotkeycmd+k,ctrl+kOpen or close shortcut
navigationUpHotkeyup,shift+tabNavigation up shortcuts
navigationDownHotkeydown,tabNavigation down shortcuts
closeHotkeyescClose shotcut
goBackHotkeybackspaceGo back on one level if has parent menu
selectHotkeyenterSelect action and execute handler or open submenu
hotKeysJoinedViewfalseIf exist/true will display hotkeys inside one element
noAutoLoadMdIconsfalseIf exist it disable load material icons font on connect


Array of INinjaAction – interface properties below

idstringUnique id/text. Will be displayed as breadcrumb in multimenu
titlestringTitle of action
hotkeystring(optional)Shortcut to display and register
handlerFunction(optional)Function to execute on select
mdIconstring(optional)Material Design font icon name
iconstring(optional)Html to render as custom icon
parentstring(optional)If using flat structure use id of actions to make a multilevel menu
keywordsstring(optional)Keywords to use for search
childrenArray(optional)If using flat structure then ids of child menu actions. Not requried on tree structure
sectionstring(optional)Section text. Like a header will be group with other same sections


open{ parent?: string }Open menu with parent, if null them open root menu
close Close menu
setParentparent?: stringNavigate to parent menu

CSS variables

–ninja-overflow-backgroundrgba(255, 255, 255, 0.5);
–ninja-text-colorrgb(60, 65, 73);
–ninja-accent-colorrgb(110, 94, 210);
–ninja-secondary-background-colorrgb(239, 241, 244);
–ninja-secondary-text-colorrgb(107, 111, 118);
–ninja-selected-backgroundrgb(248, 249, 251);
–ninja-separate-border1px solid var(–ninja-secondary-background-color);
–ninja-modal-shadowrgb(0 0 0 / 50%) 0px 16px 70px;
–ninja-group-text-colorrgb(144, 149, 157);
–ninja-footer-backgroundrgba(242, 242, 242, 0.4);

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…