Go to Peoplevine
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.
Frank Calabrese avatar
Written by Frank Calabrese. 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="{@[email protected]}">{@[email protected]}</a> <ul class="portal-subnav" data-pv-do="conditional" data-pv-conditional="{@subnav#[email protected]}>0"> <li class="portal-nav-item" data-pv-repeater="subnav"> <a href="{@[email protected]}">{@[email protected]}</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?