Navigate Between Child Documents in Umbraco

It’s a common convenience to allow website visitors to navigate to the next document within a category without resorting to the back button. You might utilize this design paradigm at the bottom of a blog post to encourage your visitors to read another one of your articles. Lucky for us, Umbraco has a built-in extension function for doing just this sort of thing with the Razor syntax.

1. In Umbraco back office, navigate to the Settings page from the main menu.
2. In the Partial Views folder, create a new partial view named SiblingContentNavigation.
3. In the Template field of the new partial view, use the code below to grab the previous and next sibling documents, ensuring they aren’t null before referencing any functions. Note that I’ve defined a Headline property on my Master document type that requires this property on all document types, allowing me to safely reference the property in the partial view. You’ll need to add the Headline property or change the property value in the view to reflect a property existing on your documents.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
var previousItem = Model.Content.PrecedingSibling();
var nextItem = Model.Content.FollowingSibling();
}

<div class="row" data-equalizer>
    <div class="small-6 columns">
        @if (previousItem != null)
        {
            <a href="@previousItem.Url">
                <div class="panel" data-equalizer-watch>
                    <h5 class="text-right">
                        « Previous
                    </h5>
                    <p class="text-right">
                        @previousItem.GetPropertyValue("headline")
                    </p>
                </div>
            </a>
        }
    </div>
    <div class="small-6 columns">
        @if (nextItem != null)
        {
            <a href="@nextItem.Url">
                <div class="panel" data-equalizer-watch>
                    <h5 class="text-left">
                        Next »
                    </h5>
                    <p class="text-left">
                        @nextItem.GetPropertyValue("headline")
                    </p>
                </div>
            </a>
        }
    </div>
</div>

1. Now expand the Templates folder and select one of your templates that display child document types. For instance, this might be BlogPost.
2. On this page, add the following HTML helper method to render the sibling navigation partial view on the page, caching the partial view by individual page for one day.

@Html.CachedPartial("SiblingContentNavigation", Model.Content, 86400000, cacheByPage: true)

Umbraco Razor