Build a Slash Commands Menu (Notion-Style)

By /
⏱ 2 min read

Slash commands (type “/” to open a menu of options) are a UX pattern popularized by Notion and now standard in modern editors (Linear, Reflect, Tana, ClickUp). The interview tests whether you understand the trigger detection, the menu positioning, and the integration with rich-text editors.

Functional requirements

  • Type “/” at start of line opens menu
  • Continued typing filters options
  • Arrow keys to navigate
  • Enter to select; Escape to dismiss
  • Selected command inserts content (heading, list, code block, etc.)

Architecture

Three pieces:

  1. Editor with cursor position tracking
  2. Trigger detection: was “/” typed at line start?
  3. Command menu (similar to combobox / command palette)

Trigger detection

On every keystroke in the editor:

  • Check if cursor is at line start (no preceding non-whitespace)
  • Check if last char typed is “/”
  • If yes, open menu
  • Track input characters after “/” for filtering

Edge cases: paste containing “/”, “/” in the middle of a word.

Menu appears near the cursor. Use Floating UI:

  • Reference element: cursor position (computed from editor)
  • Floating element: the menu
  • Flip if not enough room below

For ProseMirror / Tiptap editors, use the editor’s built-in coordinate API.

Filtering

As user types more characters, filter commands:

  • “/he” → matches Heading 1, Heading 2, Heading 3
  • “/code” → matches Code Block, Inline Code

Use fuzzy match (command-score, Fuse.js) for robust filtering.

Insertion

When user selects a command:

  1. Delete the “/” and any typed filter text
  2. Insert the appropriate node (heading, list, etc.)
  3. Position cursor correctly within the new node

For a heading: replace the line with a heading node.

Categories

Group commands:

  • Basic: text, heading, list
  • Media: image, video, embed
  • Database: inline DB, link to DB
  • Advanced: code, math, callout

Show category headers in the menu.

Aliases and keywords

“todo” should match the to-do command even though command is named “Task list”:

{ name: 'Task list', keywords: ['todo', 'checklist', 'check'] }

Integration with rich-text editor

Tiptap and ProseMirror have plugin systems:

  • Suggestion plugin from Tiptap handles trigger detection
  • You provide command list and onSelect handler

For custom editors, you build the trigger logic.

Mobile

“/” on mobile keyboards is awkward to type. Most apps:

  • Provide a “+” button on mobile that opens the same menu
  • Floating action button at bottom
  • Long-press selection bar with insert options

Common antipatterns

  • “/” triggers menu in the middle of words (false positive)
  • Menu does not close when cursor moves away
  • Inserting command does not delete the “/” prefix
  • No mobile alternative

Frequently Asked Questions

How does Notion handle when “/” is in a code block?

Code blocks have their own keyboard handling; slash menu disabled there.

Can I implement slash commands without a rich-text editor?

Yes — for plain textareas, but the insertion logic is plain text. Most modern apps use ProseMirror or Tiptap-based editors for richer behavior.

What if the user wants to type “/” literally?

Press Escape to dismiss the menu, then continue typing. Or type “/” at non-line-start (no menu trigger).

Scroll to Top