Introduction

Ok, now it's time to create the top navigation menu on the web site. The top navigation is the first level of pages under your selected web page root. Look at the image below.

image 1. Top navigation menu on the public web page

Creating a top navigation menu

Creating a top navigation menu is easy. Just add the following code to the code behind file for the master page site.master.

 protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            if (Site.DefaultContentID.HasValue)
            {
                Model.Content content = ContentService.Get<Model.Content>((int)Site.DefaultContentID);
                if (content != null)
                {
                    home.Text = content.MenuTitle();
                    if (Content.ID == Site.DefaultContentID)
                    {
                        liHome.Attributes.Add("class", "active");
                    }

                    // Gets all childrens 
                    topnav.DataSource = content.Children;
                    topnav.DataBind();
                }
            }
        }

 code 1. Top navigation code in site.master.cs

 First we check if there is a root page connected to the current Site.

if (Site.DefaultContentID.HasValue){
  ...
}

 code 2. Check if a root page is set

Next, get the root page for the current site as a Model.Content.

Model.Content content = ContentService.Get<Model.Content>((int)Site.DefaultContentID);
if (content != null)
{
    ...
}

 code 3. Get the root page for the current site

Set the properties for the home link (this is the root page and is located outside the repeater).

home.Text = content.MenuTitle();
if (Content.ID == Site.DefaultContentID)
{
    home.Attributes.Add("class", "active");
}

code 4. Set properties for the home link in the top navigation menu

The last step is to bind all the sub pages of the site root to the repeater.

topnav.DataSource = content.Children;
topnav.DataBind();

code 5. Bind to the repeater

In the site.master file, replace the static list of li-tags with a repeater. Look at the code below.

<div id="menu" class="container">
        <ul>
            <li id="liHome" runat="server"><a href="#" id="home" runat="server"></a></li>
            <asp:Repeater ID="topnav" runat="server">
                <ItemTemplate>
                    <li class="<%# Content.ID == ((Mindroute.Core.Model.Content)Container.DataItem).ID ? "active" : "" %>"><a href="<%# ((Mindroute.Core.Model.Content)Container.DataItem).Url(false) %>"><%# ((Mindroute.Core.Model.Content)Container.DataItem).MenuTitle() %></a></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
</div>

code 6. Top navigation menu in site.master