Creating the Site Menu

When you create a site in Sitecore, it is very common to use the content tree to derive the menu. This is the way Launch Sitecore is designed which results in our navigation matching our Information Architecture. If you want to use an alternate menu structure you can also use Sitecore. In fact, Launch Sitecore shows that approach in the footer menu.

The top navigation uses the lists to render a standard menu. Below is an example of the menu from this site.

First we need to look at the data template which we called Menu Item. All items that can are rendered as pages in this site are based on a template that inherits the Menu Item template. This provides the fields Menu Text as well as options to show this item and its children in the menu. To see how these look on an item, you can use the Content Editor or the Menu button in the ribbon of the Page Editor.

Now we need to take a look at the markup. You see it is simply a repeater. We are using a placeholder to make this a two level menu.

  1. <ul class="nav">
  2. <asp:Repeater ID="rptDropDownMenu" runat="server" OnItemDataBound="rptDropDownMenu_ItemDataBound">
  3. <ItemTemplate>
  4. <li id="MenuLi" runat="server">
  5. <asp:HyperLink ID="MenuLink" runat="server">
  6. <asp:Literal ID="MenuText" runat="server" />
  7. </asp:HyperLink>
  8. <asp:PlaceHolder ID="phSubMenu" runat="server" />
  9. </li>
  10. </ItemTemplate>
  11. </asp:Repeater>
  12. </ul>

This is pretty standard code for a .Net site. The Sitecore code comes more into play when you see how we bind the repeater to the content. The codebehind file takes care of this.

  1. HomeItem = SiteConfiguration.GetHomeItem();
  2. List<item> nodes = new List<item>();
  3. if (HomeItem["Show Item In Menu"] == "1") nodes.Add(HomeItem);
  4. foreach (Item i in HomeItem.Children)
  5. {
  6. if (SiteConfiguration.DoesItemExistInCurrentLanguage(i) && i["Show Item In Menu"] == "1")
  7. {
  8. nodes.Add(i);
  9. }
  10. }
  11. rptDropDownMenu.DataSource = nodes;
  12. rptDropDownMenu.DataBind();

This code uses the Children of the home node to get the child items of the home item and then binds the results to the repeater. It then uses the ItemDataBound event to load the child items.

This high level overview along with the code examples included with Launch Sitecore should provide a nice start for your site navigation.