All Collections
API / Customization / Advanced
Use the Navigation Builder to Easily Customize Your Portal Navigation
Use the Navigation Builder to Easily Customize Your Portal Navigation

With the layout navigation builder, you can now easily build out your website navigation and add to it with a few quick steps.

Updated over a week ago

THIS IS NOT FULLY ACTIVE YET, THESE ARE DEVELOPER NOTES UNTIL OUR UI TOOL IS BUILT


โ€‹

Modify the JSON script under Layout Navigation in Settings on the Page Layout

Write the navigation using HAPI including the subnav and turning classes on/off.

<strong>Navigation Sample</strong> <ul class="portal-nav-list"> <li class="portal-nav-item {@subnav#count:ifthiselse(0,'',portal-nav-dropdown)@}" data-pv-component="navigation"> <a href="{@link@}">{@title@}</a> <ul class="portal-subnav" data-pv-do="conditional" data-pv-conditional="{@subnav#count@}>0"> <li class="portal-nav-item" data-pv-repeater="subnav"> <a href="{@link@}">{@title@}</a> </li> </ul><!-- // .dropdown-menu --> </li> </ul> <hr/>

It will then render the HTML as such:

<strong>Navigation Sample</strong> <ul class="portal-nav-list"> <li class="portal-nav-item ''"> <a href="/account">Home</a> <!-- // .dropdown-menu --> </li><li class="portal-nav-item portal-nav-dropdown"> <a href="#">Membership</a> <ul class="portal-subnav"> <li class="portal-nav-item"> <a href="/account/memberships">Membership Card</a> </li><li class="portal-nav-item"> <a href="/account/edit">Edit Profile</a> </li> </ul><!-- // .dropdown-menu --> </li><li class="portal-nav-item ''"> <a href="/logout">Logout</a> <!-- // .dropdown-menu --> </li> </ul> <hr/>

Did this answer your question?