Bootstrap 3.3.5 Navigation & Hierarchical Viewer

Kristopher Maier asked on December 28, 2016 15:33

I am having success with replicating the Bootstrap nav menu within the admin but only to one level. My issue is that I will have sub folders within sections and want the items in the dropdowns to link to the home pages of that section. It works great now but it only goes to pages successfully and then the dropdown menu shows the “caret” and will not click through to the page selected in the menu.

Here is my current transformation:

<li {% if (NodeHasChildren) { return "class=\"dropdown\""} #%}>

 <a href="{% GetNavigationUrl() %}" {% if (NodeHasChildren) { return "class=\"dropdown-toggle\""} #%} {% if (NodeHasChildren) { return "data-toggle=\"dropdown\""} #%} {% if (NodeHasChildren) { return "role=\"button\""} #%}> {% HTMLEncode(DocumentName) %} {% if (NodeHasChildren) { "<span class=\"caret\"></span>" } #%} </a>

 {% if (NodeHasChildren) { "<ul class=\"dropdown-menu\">" } #%}

     {% if (NodeHasChildren) { "{^SubLevelPlaceHolder^}" } #%}

 {% if (NodeHasChildren) { "</ul>" } #%}    

 {^SubLevelPlaceHolder^} 

</li>

Any idea how I can write the grandchildren to not have the dropdown info on it?

Thank you!

bootstrap hierarchical viewer

Recent Answers

Roman Hutnyk answered on December 28, 2016 16:02 (last edited on December 10, 2019 02:30)

Why there are two {^SubLevelPlaceHolder^} in your transformation?

I think your transformation should look like this:

<li {% if (NodeHasChildren) { return "class=\"dropdown\""} |(identity)GlobalAdministrator%} </a>

 {^SubLevelPlaceHolder^} 

</li>

Next level header transformation: <ul class="dropdown-menu">

Next level footer transformation: </ul>

0 votesVote for this answer Mark as a Correct answer

Kristopher Maier answered on December 28, 2016 16:19

Two {^SubLevelPlaceHolder^} are in error.

Where would I put the Next Level transformation? I put it in the "Selected item transformations" area but do not see a next level category.

0 votesVote for this answer Mark as a Correct answer

Roman Hutnyk answered on December 28, 2016 16:27

As long as you're using sub levels you should be using hierarchical transformation - this is where you could configure transformation for different levels.

See documentation on this.

Here are some recommendations on building navigation.

0 votesVote for this answer Mark as a Correct answer

Kristopher Maier answered on December 28, 2016 16:57

I have reviewed these when building but did not have success in discerning where to put what. Is the Universal viewer with a custom query Web Part needed? I seem to be moving further from my goal.

0 votesVote for this answer Mark as a Correct answer

Roman Hutnyk answered on December 28, 2016 20:46

Kristopher, there are a lot of web parts in Kentico and all they have different purpose. I can't tell which one to use in your particular case - it depends on your needs.

Here are some articles those might inspire you:

http://devnet.kentico.com/articles/best-practices-for-implementing-site-navigation-in-kentico

https://devnet.kentico.com/articles/how-to-build-up-a-menu-using-the-hierarchical-transformation

https://devnet.kentico.com/articles/creating-a-mega-menu-using-hierarchical-transformations

0 votesVote for this answer Mark as a Correct answer