CREATING A NAVIGATION MENU IN UMBRACO CMS V5

In Umbraco the contents are organized by creating document types,templates,partial views,macros etc. So here we aim to create a navigation menu using a Macro. For this we should first know – What is a Macro in Umbraco?

In Umbraco macros are the small building blocks of functionality that can be dropped in an editor. Each Macro encompasses some functionality and provides simple interface to be able to modify them according to our requirement. The advantage of Macro is that it allows the editor to add complex element to the page in a simpler manner.

In the first step we create a MACRO of Partial View type from the Umbraco BackOffice in the Developer section and create a Macro Parameter there named MaxLevel (to decide the level we want to loop down to) of integer type. After it is done we proceed with writing the logic for the navigation in the corresponding partial view.

  @{

       var maxLevel = String.IsNullOrEmpty(Model.MacroParameters.maxLevel) ? 5 :     Convert.ToInt32(Model.MacroParameters.maxLevel);
      //Get the  current page
            var currenyPage= @Dynamicmodel;

    //We will walk up the tree to get the Root Node
    var rootNode = currentPage.AncestorsOrSelf.Last();

   //check if the Root Node is The Current Page
   var rootIsSelected = currentPage.Id == rootNode.Id;

      

• @rootNode.Name @* Display children on rootNode *@ @childPages(rootNode.Children, maxLevel)
• @helper childPages(dynamic pages, int endRenderLevel) { //Check if we have pages to loop through or not if (pages.Any()) { @* Get the navigation level *@ var naviLevel = pages.First().Level; if (naviLevel