Multiple Horizontal Menus in mojoPortal

mojoPortal comes with a lot of skins with different menu styles. One of these skins (andreasviklund-02) has two sets of horizontal menus allowing for a more compact menu system on 2nd tier pages. You can check out the above mentioned skin using the demo site for a working example. The mojoPortal site itself uses a similar menu system so you can use it as an example also.

I am currently working on my church's website ( and it uses this menu style.


To achieve this style of menu, you must add a few controls to your layout.master file.

Place this code under the HTML <form> tag with the other SiteMapDataSource controls.

<asp:SiteMapDataSource ID="level3datasource" runat="server" ShowStartingNode="true" />

Change the PageMenu control to the following and then move it to the desired location within the layout.master file. This control will show 2nd tier pages.

<portal:PageMenu id="PageMenu1" runat="server" TopLevelOnly="true"
	UseTreeView="false" HideMenuOnSiteMap="false" UseSpanInLinks="true"
	Direction="Horizontal" DynamicDisplayLevels="0" />

Finally, add a second PageMenu control. This control will show 3rd tier and lower pages.

<portal:PageMenu id="PageMenu2" runat="server"
	UseTreeView="true" TreeViewShowExpandCollapse="true"
	StartingNodeOffset="2"  SiteMapDataSource="level3datasource" />

For skinning of the menu, please refer to the stylemenu.css file in the i7MEDIA-2horizontalmenus skin.

View User Profile for Joe Davis Joe is the Founder and Managing Director of i7MEDIA. His passion is finding creative solutions to complex problems. He is married to Devyn and has three kids; Elijah, Ruth and Hannah. He is a Christian and life-long Boy Scout. When he is not at work, he's working his small homestead farm, or volunteering with the Boy Scouts or his church.


Comments are closed on this post.