Building Click-to-Open Submenus with Wayfinder

Standard navigation usually assumes that clicking a menu item should follow its link immediately. But some site structures need a different behavior: clicking a top-level item should open its submenu first and only then allow deeper navigation.

Why This Needs a Separate Pattern

Wayfinder can generate the menu structure, but it does not decide interaction rules by itself. If the first click is meant to expand a branch, that behavior must be added in the template and JavaScript layer.

What to Design Clearly

• which items behave as toggles
• whether the first click opens and the second click follows the link
• what happens on touch devices where hover is not available
• how the active branch is shown when a child page is open

Practical Recommendation

Use Wayfinder to output the hierarchical HTML, then attach a small client-side controller that turns only the needed top-level items into expanders. Keep that logic explicit instead of trying to force it into the generated markup alone.

This old question is still relevant because it is really about menu UX, not only about snippet configuration.