🎯 Focusly – Intuitive, Elegant Keyboard Navigation for Angular

Focusly is a lightweight Angular library that brings intuitive, keyboard-driven navigation to web applications.

It lets users move effortlessly between interactive elements—inputs, dropdowns, buttons, or any focusable control—using familiar keys like ↑ ↓ ← →, Home, End, and Page Up / Page Down.

Each Focusly Group acts as an independent navigation zone, so multiple grids or forms on the same page can be navigated separately and respond logically to user intent.

It provides an elegant way to define how users move between interactive controls — such as text boxes, dropdowns, or buttons — using keyboard shortcuts.
Focusly was designed to make keyboard navigation predictable, accessible, and fast, even in complex data entry UIs.

✨ Features

• 🚀 Navigate grids, tables, or forms entirely via keyboard
• 🎯 Scoped focus groups so each panel or table behaves independently on a single page
• 🪄 Elegant and simple declarative API using Angular directives
• 🧩 Works with any focusable element (<input>, <select>, <button>, etc.)
• 🧠 Easily extendable to custom components
• ♿ Built for accessibility and developer simplicity
• ⚡ Built with Angular signals for instant reactivity — no manual change detection
• ⚡ Works with provideZonelessChangeDetection() - ensures optimal performance in zone-less Angular apps
• 🔄 Fully reactive and framework-native (no DOM listeners or external deps)
• 🪶 Small, simple, and zero-dependency

🧠 Concept

Each focusable element declares:

• A group – to separate independent navigation contexts (e.g., two tables)
• A row and column – to describe its position within that group

Focusly tracks the user’s current focus position and responds to keyboard events to move to the appropriate neighbour.

📦 Installation

npm install @zaybu/focusly

📝 Example Usage

  <select
      focusly
      [focuslyGroup]="1"
      [focuslyRow]="2"
      [focuslyColumn]="3"
      >
      <option>Buy</option>
      <option>Sell</option>
  </select>

⚡ Keyboard Navigation in Action

Experience Focusly in motion — navigate complex Angular tables and forms using only your keyboard.
Use Alt + Arrow Keys to move focus, and Enter to trigger contextual actions.

🧩 Extensible by Design — Custom Component Integration

Unlike many keyboard-navigation libraries that hard-code focus behaviour in a central service, Focusly is built to be truly extensible. Each custom UI component can declare its own Focusly-aware directive, cleanly encapsulating how focus is set, managed, and released.

This means you can integrate complex third-party components (like Angular Material, PrimeNG, or NgZorro) without modifying Focusly’s core logic.

Focusly is built on a single, powerful base directive that provides all core keyboard-navigation behaviour—movement logic, focus tracking, directional traversal, and accessible focus management. Support for UI libraries such as NG-ZORRO, Angular Material, or any other component framework is achieved through lightweight extension directives that simply override a few optional hooks.

Unlike other keyboard-navigation solutions that tightly couple navigation logic to specific components—or require you to write large amounts of boilerplate—Focusly keeps the API clean and the implementation surface tiny. The benefits are substantial:

• Consistent behaviour across all toolkits and components
• No duplication of navigation logic
• Simple, maintainable extensions for toolkit-specific behaviour
• Small footprint, big flexibility—you can support new UI libraries in minutes

This design allows Focusly to be both highly opinionated in the places that matter (accessibility, deterministic movement, and predictable focus handling), and highly extensible wherever component libraries differ.

🚀 Quick Links

Try Focusly, explore the code, or join the discussion:

🚀 Live Demo (StackBlitz) https://stackblitz.com/edit/focusly-demo

📦 npm Package https://www.npmjs.com/package/@zaybu/focusly

💻 GitHub Repository https://github.com/mad-vx/focusly

🌐 GitHub Pages https://mad-vx.github.io/focusly/

💡 Comments, Suggestions & Questions (GitHub Discussions) https://github.com/mad-vx/focusly/discussions