Posted by DevNetAdmin on Tuesday, September 13, 2005 (PST) At some point in time, you will be required to create the dreaded "breadcrumb" trail navigation for your site. At some point in time, you will be required to create the dreaded "breadcrumb" trail navigation for your site. All it takes is a marketing manager to say, "Wow, that's really cool! I want one!" and voila, a requirement has been born. Leveraging components in Collage make this task much easier and flexible than you might realize! The most common approach to creating a breadcrumb trail is to utilize the Navbar/Navmap components in conjunction with a Site structure to create the actual trail. However, this has some unattractive limitations. First, since your breadcrumbs are built from a site structure, you have to build the site structure by hand, page by page. Second, if you need to delete a parent node, you have to move the entire child nodes to the parent level first or you will lose the child nodes, fun eh? To get around these limitations, there is an alternative method to building a breadcrumb trail in Collage using Collage components and a little bit of JavaScript magic. The first step is to create your master page, we will call it bcMaster.html. This page will be referenced by the consuming page, a contribution page called bcConsumer.html. The purpose of the master page is to control whether or not we will have the breadcrumb trail on our deployed page. To do this, we will use the MetaTag component wrapped around a Select component. The MetaTag component will pull in the value from our metadata called "AddBreadCrumb" which is a Boolean value (Yes/No). If "Yes" then we will go down the "Yes" branch of our Select component. If "No" then we'll go down the default path of the Select component. The "Yes" path will reference an Include Component that includes our breadcrumb logic file, bcInclude.html. What we have just covered is the logic to include the breadcrumb or not. Now, we will talk about just how the breadcrumb logic works, so further discussion is based on the assumption that the file is including the bcInclude.html file. The bcInclude.html file has 3 basic operations that will be performed; 1) get the AssetID of the page that it is included in 2) pass the AssetID into an AssetQuery to return the path to the file that it is included in and 3) pass the path information into a JavaScript block to render the breadcrumb trail at runtime. The following code performs these tasks: <nexus:component classid="nexus/components/MetaTag" code="/System/Components/nexusComponents.jar"> <nexus:component classid="nexus/components/AssetQuery" code="/System/Components/nexusComponents.jar" filter="A.assetid = '$node.assetid'"> <SCRIPT language="JavaScript"> <!-- //Get/Set necessary variables for trail var splitpath="$node.url"; var documentname = "$node.name"; var aPathArray=splitpath.split("/"); var output = "/"; var count = 0; //Loop through the array that we created, starting at the last element since we //KNOW that this is where the file is. Once we get to the "/WebSite" element we can //break the loop for(i=aPathArray.length-1;i>0;i--){ if(aPathArray[i] == "WebSite"){ break; }else{ count++; } } //Create our ouput array based on how my levels deep we went var aOutput = new Array(count); var j = 0; for(i=aPathArray.length-1;i>0;i--){ if(aPathArray[i] == "WebSite"){ break; }else{ aOutput[j]=aPathArray[i]; j++; } } //Loop through the output array, building our ouputstring. The file that we are on //is the last element added to the output for(i=aOutput.length-1;i>0;i--){ output += aOutput[i] + "/"; } output += documentname; document.write(output); //--> </SCRIPT> </nexus:component> </nexus:component> Since the code will run against the container page rather than the include page, the path will always be to the container. Therefore, if you need to move the container then the path will automatically be up to date with no need to do anything! Here are some pros/cons to this approach: Pros: Through metadata you can decide which pages will have the breadcrumb and which won’t You can control the output; therefore, you can have it styled to look like anything you want. You can move a page that is using this system ANYWHERE and you don’t have to worry about the trail, it automatically adjusts. Easily customizable! If you want different breadcrumbs for different purposes you can easily incorporate that with a bit more metadata and Select logic. Since the output is controlled in a single file, all you have to do is update that file and your navigation will be updated! You don’t have to use the “site structure” if you don’t want to, you are not BOUND by it for the purposes of the trail. Good performance! You’ve got 1 AssetQuery that you are passing an AssetID to in order to get your information; the rest is done at runtime via JavaScript! Cons: You will need to have an index file in every directory. There is a runtime workaround for this but it requires that you have a runtime system in place (e.g. asp, jsp, php, asp.net, etc.) You are pulling in actual folder names, which could be ugly. There is no way to have a “readable” name replace the actual folder name with this approach. Through leveraging the power of Collage’s design-time components along with a little runtime JavaScript you can easily add a very flexible breadcrumb navigation system that is easy to update and customize to fit your site’s needs!