Kentico 9 Hierarchical transformations for a menu system

1
votes

My end goal is to have a page that displays a Heading then links.

The Heading text would come from child folder, and the links would be pages within that folder.

I'm not concerned about the actual HTML at this point, but say an h2 for the header, an LI for each link.

I had thought i could create a repeater with a transformation to grab the folder name, and then all the sub nodes, but i'm struggling here since I've never tackled something like this in Kentico before, and have never attempted to build a navigation system using hierarchical transformations.

Here's my current content tree

  • Missed Payments
    • Group
      • Arrears Overview
      • Arrears Deductions
    • Flex

When rendered, Missed Payments should have the following code. When i add mew pages to Group and Flex, page links are shown

<h2>Group</h2>
<ul>
  <li><a href='link to overview'></a>Page Name</li>
  <li><a href='link to deductions'></a>Page Name</li>
</ul>
<h2>Flex First</h2>

I have a Header, Item and Footer transformation types, with Header, Link and Footer transformation. The HTML is simple, but i'm missing the piece to bring it all together.

1
kentico
I"m rereading that now. I'm missing something as the HTML isn't rendering as i thought it would. - Mark Handy
Mark, try the guide from documentation - it gives you step-by-step tutorial to build navigation. - Roman Hutnyk

1 Answers

1
votes

Have you looked at the Creating a Mega Menu using Hierarchical transformations how to on Kentico?

For your level 0 header have <ul><li>

Level 1 header have 

<ul>
<li><h2><a href="{% Documents[NodeAliasPath].Parent.NodeAliasPath #%}">{% Documents[NodeAliasPath].Parent.DocumentName #%}</a></h2></li>
<li>

All levels item: <a href="{% Transformation.GetDocumentUrl() #%}" >{%DocumentName%}</a>

All level separator: </li><li>

Footer: </li><li>

Make sure transformation type is Text/XML