How To Create A Basic Navigation Menu In Umbraco 7

One of the most common aspects of any website is having some form of menu to allow your site visitors to be able to navigate around your site.  There are many different ways of creating a menu in Umbraco, the most common flavour being a menu that mimics your page hierarchy in your CMS.  In today’s guide, I am going to cover the basics of creating a menu in Umbraco.

Children, Descendants and DescendantsOrSelf

The basics of any websites menu are to display the child pages of the homepage.  Umbraco provides us several useful API calls to do this, Children(), Descendants() and DescendantsOrSelf().  To describe what these different API calls do, I will use the hierarchy below to demonstrate.

<a href="http://jondjones.com/what-is-the-umbraco-helper/" target="_blank"></a>
-- News (level 1)
-- World (level 2)
--  The 10 remarkable features of object (level 3)
--  This is a wonderful news item(level 3) 
-- About (level 1)
  • Children() will only return the immediate children.  In our example, this would be ‘News’ and ‘About’
  • Descendants() returns all of the children from the current page.  In our example, this would return everything
  • DescendantsOrSelf(int level) : This works the same as descendants, except you specify how far down the page hierarchy to go.  It takes a parameter called level, a level means the number of hierarchies down to stop looking for more ancestors.  So, in our example, a level of 2 would return News, World and About

Get the current level

As I’ve mentioned in What is the Umbraco Helper?  When we work with Razor and our Views it’s best to use @Model to access the current page data as it provides us type safety, which means we can take advantage of the Razor syntax and intellisense will work.  When we work with pages @Model.Content provides us access to the current page that we’re on. So if we want to get the Children of the current page we would use this syntax

@model.Content.Children.Select(x => x)

IsVisible()

The past piece of the puzzle is, IsVIsible().  When we work with content we might not want every single page to display on the menu.  What happens if we had the T&C’s page as a child of the homepage, we might not want to ignore that. Luckily, Umbraco provides a property on the default document type called IsVisible.  If you go to a page in your Umbraco tree, go to the ‘Properties’ tab and scroll to the bottom, you will see a property called ‘Hide From Navigation’.

umbraco_hide_in_navigation

When we are on our template, we can use the IsVisible() method to check if the content editor wants this page to be displayed in a menu.

The Menu

I’ve now covered all the various calls to the API we need, so now it’s time to write the actual menu code.  For simplicity, I’m doing all this work in the template.  If you want to write unit tests around your menu, I suggest that you put all this logic in a view model rather than the Razo template.

@foreach (var page in Model.Content.DescendantOrSelf(1).Children.Where(x => x.IsVisible()))
{
<li>
<a href="@page.Url">
@page.Name
</a>
@if (page.Children.Any(x => x.IsVisible())
{
<ul>
@foreach (var subMenu in page.Children.Where(x => x.IsVisible()))
{
<li>
<a href="@subMenu.Url">
@subMenu.Name
</a>
</li>
}
</ul>
}
</li>
}

In the code above, I’m first getting a list of all level 1 descendants from the current page and rendering a link to it, using the pages Url and name property.

For each page, check to see if it has any immediate children. If it does, render an ordered list and display with appropriate pages.

Conclusion

In today’s post we’ve covered some of the basics of the Umbraco API, specifically the different between Children, Descendants and DescendantsOrSelf and how we can get different page sets based on the navigation structure.

We’ve also gone over the benefits of using @model and how each page has an in-build ‘Hide From Navigation’ property that can be used to hide the pages the content editor has hidden in the backend.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *