Press "Enter" to skip to content

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 🙃

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

FieldDefaultDescription
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

Data

Array of INinjaAction – interface properties below

NameTypeDescription
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

Methods

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

CSS variables

NameDefault
–ninja-width640px;
–ninja-backdrop-filternone;
–ninja-overflow-backgroundrgba(255, 255, 255, 0.5);
–ninja-text-colorrgb(60, 65, 73);
–ninja-font-size16px;
–ninja-top20%;
–ninja-key-border-radius0.25em
–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-icon-colorvar(–ninja-secondary-text-color);
–ninja-icon-size1.2em;
–ninja-separate-border1px solid var(–ninja-secondary-background-color);
–ninja-modal-background#fff;
–ninja-modal-shadowrgb(0 0 0 / 50%) 0px 16px 70px;
–ninja-actions-height300px;
–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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.