Custom section tree nodes and routes - Umbraco

If you haven't already created a custom section within Umbraco, I suggest that you follow this amazing tutorial by Markus it's a two part tutorial on setting upt he basics of a custom section.

Lets start by discussing the structure of a custom section and assuming you've already got the section set up in Umbraco and you now want to add nodes to it, we'll look at how the nodes within the left panel get called and what parameters you can give them.

Defining a TreeController

A TreeController should be defined as per below, but make sure to check out the tutorial I've linked above to learn how to make it functional.

[Umbraco.Web.Trees.Tree("mypackagename", "myfirsttreealias", "my tree name", iconClosed: "icon-folder", sortOrder: 0)]
public class MyTreeController : TreeController
    protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
        var colNodes = new TreeNodeCollection();

        var objNode = this.CreateTreeNode("1", id, queryStrings, "Node name", "icon-folder", true);

        return colNodes;

    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
        var menu = new MenuItemCollection();
        menu.DefaultMenuAlias = ActionNew.Instance.Alias;
        menu.Items.Add<RefreshNode, ActionRefresh>("Refresh");
        return menu;

By now, you should have a TreeController class for your application, and you should understand what it does, given its name and implemented methods, but you should also understand the following:

Information about the Umbraco TreeController

  1. You can have multiple tree controllers for one custom Umbraco section.
  2. Umbraco will not create a root level node for your tree controller unless you have multiple tree controllers defined.
  3. Umbraco will render the document specified in the Dashboard.config file for all root nodes.
  4. You can order many TreeController root nodes using the sortOrder parameter.
  5. You can define a custom icon for the root node using the iconClosed and iconOpen parameters.

Node parameters

The CreateTreeNode method takes the following parameters:

CreateTreeNode(int id, string parentId, FormDataCollection queryStrings, string title, string icon, bool hasChildren, string routePath)

The minimum required parameters given to the method is everything up to and including title.

Defining more than one TreeController class

Implementing more than one tree controller is easy, make sure that the reference the same package name, but change the tree alias as defined in the above example as myfirsttreealias.

Why define more than one TreeController?

Multiple tree controllers are useful if you're displaying data in two or more categories/types, for example, I might have a motorbike tree and a car tree, some data will be similar, but ultimately, I want the data to display differently and post to different locations. Whilst this is possible with a single TreeController, adding a second simplifies things as we can now define different angular controllers and layout files for our nodes under different folders.

Umbraco will expect your default files such as create.html, edit.html and delete.html to be located under a folder in App_Plugins such as the following:


Defining custom routes

Notice that in the above example, I defined a new node for our tree structure as follows:

var objNode = this.CreateTreeNode("1", id, queryStrings, "Node name", "icon-folder", true);

But under the Node parameters heading, I described how the CreateTreeNode method takes more parameters than that, specifically, we're missing the routePath.


A completed route may look something like this:


Using the above example, clicking a node with the above route attached, would look for a file called editcarhistory.html using the following path:



As you can see, custom sections and routes aren't that difficult, given a few bits of knowledge about the smaller details.

If you have any questions or spot that I've done something wrong, feel free to comment and I'l do my best to help out.​

Published at

Tags: Umbraco,C#

Luke Alderton


Marco Teodoro
Hi Luke, do you know if its's possible to add a route for a different section without refreshing the tree view. taking your exemple imagine you have another section lets say mechanic and you want to open that editor inside this section not redirect to "mechanic /ree/edit/1234". do you know if this is possible? maybe i need to create a view in this section to call the other one with navidation service no? have you done this before? Thanks
Share with
Latest Comments
By Mark Gentry on Windows Server 2019 - Change product key does nothing
20 Aug 2021, 03:30 AM
By Cathy on In-Place Upgrade for a Windows Server domain controller
31 Jul 2021, 18:28 PM
By Mr. Greymatter on Raspberry Pi - Running Java app on Raspbian
16 Feb 2021, 07:35 AM
By Mikko Seittenranta on Xamarin Forms multiple instances of same app open
16 Feb 2021, 04:34 AM
By Andrew on Auto/Custom height on Xamarin Forms WebView for Android and iOS
22 Jan 2021, 22:15 PM
By Nick on Raspberry Pi - Running Java app on Raspbian
14 Oct 2020, 19:37 PM
By Ivan on Fixed: Value cannot be null Parameter Name: source
15 Sep 2020, 19:47 PM
By Anand on Raspberry Pi - Bluetooth using Bluecove on Raspbian
7 Sep 2020, 16:53 PM
App Development
Game Development
Web Development