EpiServer 9 mvc add page to Navigation

Question

I'm playing around with an Episerver site. I'm not using a template just a blank Episerver site.

I have a created a pagetype Ex. Startpage programmatically and I can add it in the edit view as a new page. So my question is how do I make the new pages that I create show up in my navigation bar? Thanks!

   <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <!-- Some code here?? -->

            </ul>
        </div>
    </div>
</div>

Answer 1

This is how I solved it in an old project:

1. Create a new folder called "Helpers"

2. Create the new class "NavigationHelper":

   using EPiServer;
   using EPiServer.Core;
   using EPiServer.Filters;
   using EPiServer.ServiceLocation;
   using EPiServer.Web.Mvc.Html;
   using EPiServer.Web.Routing;
   using System.Linq;
   using System.Web.Mvc;
   
   namespace Demo.Helpers
   {
       public static class NavigationHelper
       {
       public static void RenderMainNavigation(this HtmlHelper html, PageReference rootLink = null, ContentReference contentLink = null, bool includeRootPage = true, IContentLoader contentLoader = null)
       {
           var writer = html.ViewContext.Writer;
   
           contentLink = contentLink ?? @html.ViewContext.RequestContext.GetContentLink();
           rootLink = rootLink ?? ContentReference.StartPage;
   
           if (includeRootPage)
           {
               if (rootLink.CompareToIgnoreWorkID(contentLink))
               {
                   writer.WriteLine("<li class=\"active\">");
               }
               else
               {
                   writer.WriteLine("<li>");
               }
               writer.WriteLine(html.ContentLink(rootLink).ToHtmlString());
               writer.WriteLine("</li>");
           }
   
           contentLoader = contentLoader ?? ServiceLocator.Current.GetInstance<IContentLoader>();
   
           var topLevelPages = contentLoader.GetChildren<PageData>(ContentReference.StartPage).ToList();
           topLevelPages = FilterForVisitor.Filter(topLevelPages).OfType<PageData>().Where(x => x.VisibleInMenu).ToList();
   
           var currentBranch = contentLoader.GetAncestors(contentLink).Select(x => x.ContentLink).ToList();
   
           currentBranch.Add(contentLink);
   
           foreach (var topLevelPage in topLevelPages)
           {
               if (currentBranch.Any(x => x.CompareToIgnoreWorkID(topLevelPage.ContentLink)))
               {
                   writer.WriteLine("<li class=\"active\">");
               }
               else
               {
                   writer.WriteLine("<li>");
               }
               writer.WriteLine(html.PageLink(topLevelPage).ToHtmlString());
               writer.WriteLine("</li>");
           }
       }
   }
   }
   

The code is a bit crude but it works and will get you some info on how to customize it for your needs.

3. In the top of your layout page add a using for your new class. For example:

   @using Demo.Helpers;
   

4. In your layout Replace "<!-- Some code here?? -->" with:

   @{
     Html.RenderMainNavigation();
    }
   

Now you should have a working menu that you can customize for your project :)

I found this relatively simple code in a project I made in an old website. Probably the code was taken from the book "EPiServer 7 CMS Development" which is written by Joel Abrahamsson. Or it might be from the Alloy template but if I remember right the code in Alloy is a bit more complicated for the main menu.