Working with WCM navigator component

Usecase :- Think you have a requirement for a links to be dynamically coming from a site-area and these links will be edited  by business people.

Step1 :-  Create your site-areas hierarchy as you decide. Now create your navigator component and use below code. Then map it to Content,Authoring template and Presentation template.

Result design 1:-
<li class="menuListItems level1Menu wpthemeLeft">
 <a target="_blank" href="[Element context="autofill" type="sitearea" key="LinkElement" format="url"]" class="mainMenuA">
  <div class="customTitle">
   <span class="menuTitle">[Placeholder tag="title"]</span>
  </div>
 </a>

Result design 2 :-
<ul class="wpthemeNavList submenu level2Menu hiddenDisplay">

<li class="wpthemeNavListItem wpthemeLeft">
 <a target="_blank" class="wpthemeLeft wpthemeFirst" href="[Element context="autofill" type="sitearea" key="LinkElement" format="url"]">
  [Placeholder tag="title"]
 </a>

</ul>
</li>

Result design 3 :-
<ul class="wpthemeNavList level4Menu">

<li class="wpthemeNavListItem">
 <a target="_blank" class="wpthemeLeft wpthemeFirst" href="[Element context="autofill" type="sitearea" key="LinkElement" format="url"]">
  [Placeholder tag="title"]
 </a>
</li>

</ul>
</li>

Step 2 :- Now create web-content-viewer portlet and map navigator to show navigation.