Adding Secondary Labels to Wayfinder Menu Items

A common Wayfinder problem is not the tree itself, but the markup contract. Designers hand over a menu where every item needs something like this:

<ul id="menu">
    <li id="nav1" class="active"><a href="index.html">Home<span>Welcome!</span></a></li>
    <li id="nav2"><a href="News.html">News<span>Fresh</span></a></li>
</ul>

The old donor asked how to keep the extra <span> line in Wayfinder output. The answer is simple: do not fight the snippet. Use the template layer properly.

What to store

If each menu item needs a second line, put that second line in a field the template can access. Depending on the project, that can be:

• menutitle for the main short label and pagetitle for the full title
• a TV dedicated to the menu subtitle
• a chunk parameter map if the values are fixed and small

Why Wayfinder still works well here

Wayfinder does not need to know what the second line means. It only needs a template that renders the values consistently. That keeps the menu structure in Evo and the visual structure in the chunk, which is exactly where this kind of customization belongs.

Recommendation

If the menu is tightly designed, create a dedicated field for the secondary label instead of hard-coding text in the chunk. That gives editors control and keeps the frontend template stable.