Table of contents
Understanding the Code: A Simple Approach to Umbraco Navigation
The UmbracoNavigationHelper class provides a static method named GetSiblingNodes.
This method takes an IPublishedContent object - representing the current node - and returns a tuple containing the previous and next nodes if they exist.
Here's a breakdown of how it works:
public class UmbracoNavigationHelper
{
public static (IPublishedContent Previous, IPublishedContent Next) GetSiblingNodes(IPublishedContent currentNode)
{
var siblings = currentNode.Parent?.Children.ToList();
IPublishedContent previous = null, next = null;
if (siblings != null)
{
int currentIndex = siblings.IndexOf(currentNode);
if (currentIndex > 0)
{
previous = siblings[currentIndex - 1];
}
if (currentIndex + 1 < siblings.Count)
{
next = siblings[currentIndex + 1];
}
}
return (previous, next);
}
}Key Points of the Code
- Parent and Children: The method accesses the parent of the current node, then converts its children into a list, allowing for indexing.
- Indexing Siblings: By finding the index of the current node among its siblings, the method identifies the previous and next nodes based on their positions in the list.
- Return Tuple: The method returns a tuple (Previous, Next), where each item is an IPublishedContent object representing the respective sibling node.
Example Usage: Implementing the Method in an Umbraco View
To use this helper method in your Umbraco project, you might integrate it into a Razor view to display navigation links to adjacent content nodes:
@using Umbraco.Cms.Core.Models.PublishedContent
@inherits Umbraco.Cms.Web.Common.Views.WebViewPage
@{
var currentNode = Model;
var siblings = UmbracoNavigationHelper.GetSiblingNodes(currentNode);
}
<div>
@if (siblings.Previous != null)
{
<a href="@siblings.Previous.Url">Previous: @siblings.Previous.Name</a>
}
@if (siblings.Next != null)
{
<a href="@siblings.Next.Url">Next: @siblings.Next.Name</a>
}
</div>Example Content Hierarchy
Imagine a website structured as follows:
Home
├── About Us
├── Services
│ ├── Web Design
│ ├── SEO Services
│ └── Social Media Management
└── Contact UsIn this structure:
- Home is the root node.
- About Us, Services, and Contact Us are sibling nodes at the same level.
- Under Services, there are three child nodes: Web Design, SEO Services, and Social Media Management, which are siblings to each other.
How the GetSiblingNodes Method Applies
If we apply the GetSiblingNodes method to the "SEO Services" node, the method will work as follows:
- The parent node is "Services".
- The sibling nodes are "Web Design" and "Social Media Management".
- GetSiblingNodes would identify "Web Design" as the previous node and "Social Media Management" as the next node based on their positions in the list.
Explore More
🌐Interested in learning about Umbraco and web development insights?
Explore our Umbraco blog for a wealth of information and expert advice.