Site Navigation

The hierarchy of a site is stored in the structure.json file associated with the site. The hierarchy is loaded into memory and made available in the page context as the SCS.structureMap object.

Site Builder reads the structure.json file to draw the site tree in Site Builder. The structure.json file will contain code for the site pages. For example:

"pages": [  {        
     "id": 100,      
     "name": "Home",      				
     "parentId": null,             
     "pageUrl": "index.html",      
     "hideInNavigation": false,    
     "linkUrl": "",                
     "linkTarget": "",             
     "children": [ 200,            
                   300,            
                   400,            
                   500 ],          
     "overrideUrl":false           
     } 
   
     {
     "id":200,
     "name":"Products"
     "parentId":100,                
     "hideInNavigation":false,      
     "LinkUrl":"",                  
		 "linkTarget":"",               
		 "children":[ 204, 205],        
		 "overrideUrl":false            
     }                              

     {
     "id":204,
     "name":"Hiking Boots",
     "parentId":200,
		 "pageUrl":"products/hiking_boots.html",
		 "hideInNavigation":false,
		 "linkUrl":"",
     "linkTarger":"",
     "children":[],
     "overrideUrl":false
     }

Navigation JavaScript code is necessary within the site pages to also read that structure and draw out the navigation links for the site. Templates provided with Oracle Content Management include sample navigation JavaScript files that illustrate how this works.

The topnav.js file used in some of the themes provided with Oracle Content Management is an example of how you can use the SCS.structureMap object along with the Render API calls such as SCSRenderAPI.getPageLinkData to traverse the site structure and draw out the HTML markup needed to render the navigation menus in the page. Here is code from the sample topnav.js file:

function renderNode(id, navBar)
{
	if (id >= 0)
	{
		var navNode = SCS.structureMap[id];
		if( navNode &&
			(
				( typeof navNode.hideInNavigation != "boolean" ) ||
				( navNode.hideInNavigation === false )
			) )
		{
			var navItem = document.createElement("li");
			var navLink = document.createElement("a");
			var navText = document.createTextNode(navNode.name);
			
			var linkData = SCSRenderAPI.getPageLinkData(navNode.id) || {};
			if( linkData.href ) {
				navLink.href = linkData.href;
			}
			if( linkData.target ) {
				navLink.target = linkData.target;
			}

			navLink.appendChild(navText);
			navItem.appendChild(navLink);

			if (navNode.children.length > 0)
			{
				var navSub = document.createElement("ul");
				
				for (var c = 0; c < navNode.children.length; c++)
				{
					renderNode(navNode.children[c], navSub);
				}
				
				navItem.appendChild(navSub);
			}
			navBar.appendChild(navItem);
		}
	}
}

function renderNav()
{
	var topnav = document.getElementById("topnav");		// expected to be an empty <div>

	if (topnav)
	{
		var navBar = document.createElement("ul");

		renderNode(SCS.navigationRoot, navBar);

		topnav.appendChild(navBar);
	}
}

// Must wait for all our script to be ready...
if (document.addEventListener)
{
	document.addEventListener('scsrenderstart', renderNav, false); 
}
else if (document.attachEvent)
{
	document.documentElement.scsrenderstart = 0;
	document.documentElement.attachEvent("onpropertychange",
		function(event)
		{
			if (event && (event.propertyName == "scsrenderstart"))
			{
				renderNav();
			}
		}
	);
}

You can use Render API calls to generate navigation links that will function in your site Edit and Preview modes and in a published online site. See Render API Reference.

It is good practice to put navigation information into one JavaScript file, such as topnav.js. The JavaScript file is usually stored in the /assets/js/ folder of the theme, as you can see in the sample themes provided with Oracle Content Management.