𝗜 𝗥𝗲𝗯𝘂𝗶𝗹𝘁 𝗡𝗼𝘁𝗶𝗼𝗻'𝘀 𝗦𝗹𝗮𝘀𝗵 𝗠𝗲𝗻𝘂 𝗶𝗻 𝟳𝟬 𝗟𝗶𝗻𝗲𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
Notion feels like magic. You type a slash and a menu appears. You select an option and your text transforms.
I rebuilt this feature using 70 lines of vanilla JavaScript. The magic is simple logic.
Day 9 of my DesignFromZero series focuses on famous UI. I rebuild these tools from scratch to understand them.
The logic relies on three parts:
- Data models: A document is a list of blocks. Each block holds one piece of data. This is its type.
- The trigger: Every time you type, the code checks the text. If the text starts with a slash, the menu opens.
- The filter: The menu uses keywords to find commands. A command like Heading 1 might have keywords like h1 or title. This makes the search feel smart.
The code uses a simple trick for navigation. Using the modulo operator lets you use the arrow keys to move through the list. It wraps the selection from the bottom back to the top.
When you press Enter, the code performs two tasks:
- It updates the block type in the data. CSS then handles the visual change.
- It clears the slash and the command text.
Complex features often have simple foundations. A slash menu is just data plus a prefix check and a type swap.
Try the live demo here: https://dev48v.infy.uk/design/day9-notion-slash.html
Read the full breakdown here: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i