< Return to Feed
Justin Brown
07.14.2015

Dynamic In-Page Navigation

We need the ability to create a dynamic, in-page, sub-navigation which would be easy for content managers to modify.

To accomplish this we needed to create an Anchor view rendering, Anchor Nav controller rendering and a few supporting items.

Create an Anchor View Rendering

The anchor rendering will be render our anchor html and provide a visual cue for content managers when viewed in the Experience Editor.

@using Sitecore.Mvc.Presentation
@model RenderingModel

@{
    string anchor = Model.Rendering.Parameters["Anchor"];
}

<a id="@anchor"></a>

@if (Sitecore.Context.PageMode.IsPageEditor)
{
    <div style="margin: 0; padding: 0; background: #aaa;">anchor: @anchor</div>
}

Create a Rendering Parameters Template for the Anchor Rendering

A rendering parameters template provides editors with a better experience and prevents user mistakes.

Anchor Rendering Parameters Template

Now attach the rendering parameters to the Anchor rendering

Assign Anchor Rendering Parameters Template to Anchor Rendering

Create Anchor Nav View Model

The anchor nav view model will search the current page's renderings for instances of the Anchor rendering, extract data from their rendering parameters and generate a list of anchors.

Note: The Anchor Rendering’s ID is hardcoded in this example! Change it to yours or better yet abstract it.

using Sitecore.Data;
using Sitecore.Mvc.Presentation;
using Sitecore.Web;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;

namespace SitecoreSandbox.Website.Models.Renderings
{
    public class AnchorNavModel : RenderingModel
    {
        public class Anchor
        {
            public string Text { get; set; }
            public string Name { get; set; }
        }

        public override void Initialize(Rendering rendering)
        {
            base.Initialize(rendering);
            Anchors = PageItem.Visualization.GetRenderings(Sitecore.Context.Device, true).
                Where(r => r.RenderingID == new ID("{8F991D92-B697-427F-B1F5-8AF088C583CC}")).
                Select(r =>
                {
                    NameValueCollection parameters = WebUtil.ParseUrlParameters(r.Settings.Parameters);
                    return new Anchor() { Name = parameters["Anchor"], Text = parameters["Anchor"] };
                }).ToList();
        }

        public List<Anchor> Anchors
        {
            private set;
            get;
        }
    }
}

Create an Anchor Nav View

@model SitecoreSandbox.Website.Models.Renderings.AnchorNavModel

<p>anchor nav</p>

<ul>
    @foreach (var anchor in Model.Anchors)
    {
        <li><a href="#@anchor.Name">@anchor.Text</a></li>
    }
</ul>

Create an Anchor Nav Controller Rendering

This controller rendering will initialize the anchor nav view model and render our view

using Sitecore.Mvc.Presentation;
using SitecoreSandbox.Website.Models.Renderings;
using System.Web.Mvc;

namespace SitecoreSandbox.Website.Controllers.Renderings
{
    public class AnchorNav : Controller
    {
        // GET: Default
        public ActionResult Index()
        {
            AnchorNavModel model = new AnchorNavModel();
            model.Initialize(RenderingContext.Current.Rendering);
            return View("~/Views/Renderings/AnchorNav.cshtml", model);
        }
    }
}

Test It Out

Create a page, drop an anchor nav and a few anchors on the page. Configure the anchors through the component properties:

Example of anchor component properties

From the editor's view:

Example editor perspective

From the user's view:

Example user perspective

< Return to Feed