Watch the Live Coding Video

Watch on YouTube

Create a partial view called _PrevNext

@inherits UmbracoViewPage

IPublishedContent parent = Umbraco.AssignedContentItem.Parent;
IEnumerable<IPublishedContent> children = parent.Children;
List<int> childrenIds = children.Select(x => x.Id).ToList();
int currentIndex = childrenIds.IndexOf(Umbraco.AssignedContentItem.Id);

IPublishedContent prev = null;
IPublishedContent next = null;

if (currentIndex > 0)
prev = children.ElementAt(currentIndex - 1);

if (currentIndex < (children.Count() - 1))
next = children.ElementAt(currentIndex + 1);

<div class="row">
<div class="col-xs-6">
@if (prev != null)
<a class="prevnext prev" title="@prev.Name" href="@prev.Url"><i class="fa fa-arrow-left"></i> Prev</a>
<div class="col-xs-6">
@if (next != null)
<a class="prevnext next" title="@next.Name" href="@next.Url">Next <i class="fa fa-arrow-right"></i></a>

To call it from a template use this

@{ Html.RenderPartial("_PrevNext"); }

Here are the style rules I created

.prevnext {
display: block;
background: red;
color: #fff;
min-width: 100px;
text-align: center;
padding: 15px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 20px 2px #4F4F4F;
box-shadow: 2px 2px 20px 2px #4F4F4F;

.prevnext.prev {
margin-left: 20px;
} {
margin-right: 20px;

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Proudly sponsored by


  • Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.

  • CI/CD service for Windows, Linux and macOS
  • Build, test, deploy your apps faster, on any platform.

  • Custom stickers for startups, artists and brands.
  • Bespoke easy-apply, removable, custom brand stickers printed in the UK.

  • is the easy error logging and uptime monitoring service for .NET.
  • Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete

  • uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.