🎯 Focus Mode Demo - Radix Tree

⚙️ Focus Mode Configuration
Choose different focus modes to see how the tree behaves when expanding nodes. Each mode provides a different user experience for managing open nodes.

Select Focus Mode:

🎪 Accordion Mode

Only one node open at a time per level. Opening a new node automatically closes the previously open one. Perfect for limited screen space.

✨ Highlight Mode

Multiple nodes can stay open, but the current node gets visual focus with a green border and background. Includes smooth auto-scroll.

📁 Collapse Siblings

When opening a node, all its siblings automatically collapse. Keeps the tree clean while maintaining context.

🔄 Auto-Scroll

Simply scrolls to the newly opened node without changing any open/close states. Great for large trees.

📋 Instructions

How to test:

  • Select a focus mode from the radio buttons above
  • Click on nodes with chevrons (▶️) to expand them
  • Observe the behavior - each mode behaves differently
  • Try different combinations to see the effects