Skip to content

[P1] Add Command Palette (Cmd+K / Ctrl+K) for Quick Navigation #179

Description

@flexykrn

Bug Description

Power users and developers expect keyboard-driven navigation in modern documentation sites. Currently, finding content requires scrolling through the sidebar or using basic search. A Command Palette (activated by Cmd+K or Ctrl+K) would allow instant jumping to any page, section, or recent search — dramatically improving navigation efficiency.

Competitor Benchmark

  • Vercel: Cmd+K opens palette with page search, command execution
  • Stripe: Cmd+K for quick navigation to any doc section
  • Linear: Cmd+K for command palette across entire app
  • Notion: Cmd+K for universal search and navigation
  • Tailwind CSS: Cmd+K for instant doc search

Affected Users

  • Power users who navigate docs frequently
  • Developers who prefer keyboard over mouse
  • Accessibility users relying on keyboard navigation
  • Mobile users (can use tap gesture)

Blast Radius

  • Primary: All returning visitors
  • Secondary: Users on large screens where sidebar is overwhelming
  • Impact: Faster navigation, reduced cognitive load, modern UX expectation

Root Cause Analysis

No keyboard shortcut system is implemented. The existing search requires clicking the search box first. Command palette is a UX pattern now standard across developer tools.

Proposed Solution

Option A: Algolia DocSearch with Cmd+K (Recommended)

If Algolia DocSearch is implemented, it naturally supports Cmd+K activation:

document.addEventListener('keydown', (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    docsearch.open();
  }
});

Option B: Custom Command Palette Component

Build lightweight palette using:

  • Fuse.js for fuzzy search
  • Page title + heading index
  • Recent pages history
  • Keyboard navigation (arrow keys, enter, escape)

Additional Fixes Required

  • Keyboard shortcut hint in search bar ('Press Cmd+K to search')
  • Visual overlay/modal design
  • Accessibility: ARIA labels, focus trapping, escape to close
  • Mobile: Touch gesture or floating button

Acceptance Criteria

  • Cmd+K (Mac) / Ctrl+K (Windows/Linux) opens palette
  • Escape closes palette
  • Arrow keys navigate results
  • Enter selects highlighted result
  • Shows page titles and section headings
  • Recent searches/pages shown by default
  • Accessible via screen reader
  • Works on mobile (alternative trigger)

Raw Context

Developers navigating between RPC docs, smart contract guides, and node setup repeatedly waste time scrolling. Command palette is now table stakes for developer documentation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions