Building Multi-Level Menus with Wayfinder

This donor showed a long static navigation example with multiple levels, dropdown wrappers, and repeated patterns. That is exactly the type of menu that should be translated into Wayfinder row templates instead of being maintained by hand.

Recommended Approach

• Split the navigation into row, inner row, parent row, and outer wrapper templates.
• Map the original classes and IDs to Wayfinder template chunks.
• Test the two-level case first, then extend to deeper nesting only after the base structure works.
• Keep JavaScript hooks and visual classes in the chunk layer, not inside resource titles.

The donor topic is useful because it captures the real pain point: designers hand over a static nested menu, and developers need a maintainable way to generate the same structure from the resource tree.