Working with the Piranha menu

Published: 7/6/2012, Author: Håkan Edling Categories: Tutorials, Piranha, 0 Comments

When it comes to building menus, Piranha really makes it easy for you. In this post we'll describe how the included menu works and how you can tweak it to your needs.

Unlike many other CMS platforms out there Piranha really makes it easy for you to build menus. With just a single helper method it provides you with a number of choices for creating the menu structure you want, without any fuzz. And even better, the menu is rendered as a simple UL/LI list with no unneccessary HTML to clog up your neatly constructed layout.

The helper method

The menu method is located in the UI helper, available to all Piranha pages. You can call the method without any parameters to output the entire published and visible sitemap. But if you want to tweak it a bit the following parameters are available.

int StartLevel // The start level of the menu (indexed from 1, default 1)
int StopLevel // The endlevel of the menu (indexed from 1, default Int32.MaxValue)
string RootNode // The root of the sitetree (the permalink to a page in the site)
string CssClass // The css-class of UL-element (default 'menu')

To create a regular single level topmenu (like most sites have) you would enter the following code into your view:

@UI.Menu(StopLevel: 1)

This would render the first level of the sitemap. For the currently selected page, the LI-element would have the class active. Now if we wanted to display a simple submenu for all pages available under the currently selected topmenu, just enter the following line of code into your view. We'll change the css-class as well so we can style it a bit different.

@UI.Menu(CssClass: "submenu", StartLevel: 2)

That's really all there's to it. The menu function will automatically find the available sitetree at level 2 depending on the currently selected page. If you were to select a page from the submenu, the LI of the selected page would get the class active and all of it's parents, regardless of what menu they are in would get the class active-child.

But there's more. Let's say you would like a special context menu for the a page in the site, we say no problem. Just create a hidden page in your site (preferably below the active page) and add the pages that should appear in the context menu below this page. In this example we'll say that the hidden page is called "Hidden context menu", then just enter the following line of code:

@UI.Menu(CssClass: "contexmenu", RootNode: "hidden-context-menu")

And there you go, the context menu will appear at your page. We hope this post has given you a small insight on how to work with the Piranha menu in the UI-helper.

blog comments powered by Disqus