Laravel Ninja Keys — Keyboard Shortcuts & Command Menu

Overview

Keyboard shortcuts are a defining characteristic of professional-grade web applications. Tools like GitHub, Linear, Notion, Figma, and Superhuman all use keyboard command menus to accelerate power user workflows and signal product quality. Laravel Ninja Keys makes adding a searchable keyboard shortcut command menu to any Laravel application trivial — wrapping the battle-tested ninja-keys web component in a clean PHP API and Blade directive.

The Problem It Solves

Adding keyboard shortcuts to a Laravel application without a dedicated package requires:

• Custom JavaScript event listener management scattered across templates
• No centralised shortcut registry or discoverability UI
• Manual conflict resolution between shortcuts registered at different component levels
• Zero built-in UI for users to discover available shortcuts

Ninja Keys solves the discoverability problem with an elegant, searchable overlay. Laravel Ninja Keys makes registering those shortcuts a purely PHP concern.

Key Features

• Fluent PHP API — register shortcuts and sections with chainable PHP methods
• Blade directive — @ninjakeys outputs the fully configured component in one line
• Section grouping — organise shortcuts into named sections (Navigation, Actions, Content, Settings)
• Icon support — optionally show SVG or Heroicon icons alongside shortcut labels
• Platform-aware key display — shows ⌘ on macOS, Ctrl on Windows/Linux
• Configurable trigger — opens on /, ⌘K, or any custom key combination
• Native web component — ninja-keys is a zero-framework web component, adding minimal bundle weight
• ARIA accessible — keyboard navigation and screen reader support built in to the web component

Usage Example

use AmjadIqbal\LaravelNinjaKeys\Facades\NinjaKeys;

NinjaKeys::section('Navigation')
    ->add('Go to Dashboard', route('dashboard'), 'home', ['g', 'd'])
    ->add('Go to Projects', route('projects.index'), 'folder', ['g', 'p'])
    ->add('Go to Blog', route('blog.index'), 'document-text', ['g', 'b']);

NinjaKeys::section('Actions')
    ->add('New Project', route('projects.create'), 'plus', ['n', 'p'])
    ->add('New Post', route('posts.create'), 'pencil', ['n', 'b']);

In your layout:

@ninjakeys

Technology Stack

PHP 8.2+, Laravel 11/12, ninja-keys (vanilla JavaScript web component). No npm build step is required for basic usage — ninja-keys can be loaded via CDN or integrated into an existing build pipeline.

Practical Use Cases

• Developer tools and internal dashboards where power users expect keyboard navigation
• Content management systems with frequent repeated actions (save, publish, preview, duplicate)
• Admin panels supplementing Filament's navigation with custom global shortcuts
• SaaS applications aiming for a premium power user experience
• Portfolio and personal sites with enhanced, interactive navigation UX

Source & License

Full documentation and usage examples on GitHub. MIT Licensed.