ninja-keys

• Purpose: Ninja Keys is a keyboard shortcut interface library for websites, enabling users to quickly navigate and execute actions using keyboard commands (similar to Spotlight or Alfred). It appears when triggered (typically via ⌘+k or ctrl+k) and supports nested menus, search, and customizable hotkeys.

• Target Audience: Developers building web applications or static websites who want to enhance user experience with keyboard-driven navigation and actions.

• Key Features:

  • Keyboard navigation with customizable hotkeys.
  • Light/dark theme support.
  • Built-in Material Design icons and custom SVG icon support.
  • Nested menus (flat or tree data structures).
  • Auto-registered shortcuts.
  • Root search functionality (searches across nested menus).
  • CSS customization via variables and Shadow Parts.
  • Framework-agnostic (works with Vanilla JS, Vue, React, Svelte, and more).

• Svelte Support: Explicitly supported with a dedicated Svelte example .

• Data Structure: Supports both flat and nested (tree) action structures for menus.

• Theming: Includes built-in dark/light themes and extensive CSS variable customization.

• Events & Handlers: Emits change and selected events for search and action handling, with optional per-action handlers.

• Why "Ninja"?: The library enables users to perform actions quickly like a ninja, appearing/disappearing on demand.

For demos and framework integrations, visit the demo page .