Using Wayfinder When Your Menu Markup Must Match a Fixed HTML Design

One of the most common Wayfinder questions is not about data, but about markup. A project already has a precise HTML menu design, and the default Wayfinder output does not match it.

The Core Tension

Wayfinder naturally produces a structured list. Designers, meanwhile, often hand over bespoke wrappers, spans, and active-state markup that only partially resembles a normal list.

The Practical Solution

Instead of fighting the snippet output directly in one giant template, split the problem:

• use outerTpl to control the wrapper
• use rowTpl, rowHereTpl, and related templates for item states
• model the active branch explicitly instead of post-processing random HTML

Why This Matters

The old discussion was really about using Wayfinder as a structured renderer rather than as a magic HTML copier. Once you accept that, the menu becomes much easier to adapt cleanly.