Try our conversational search powered by Generative AI!

Sitemap Columns


Hi, does anyone know how to have multiple columns in the sitemap? I've searched around and can't seem to find a solution.

Basically, the current sitemap is in one longgg list, but I need it spread out in 3 columns.

This is my placeholder:

<asp:Content ID="Content1" ContentPlaceHolderID="SingleColumn1" runat="server">
    <div class="middle_content">
        <div class="column1">
            <div class="sitemap_block">
                    <li><asp:HyperLink ID="HomeHyperLink" runat="server" ></asp:HyperLink> </li>
            <EPiServer:PageTree runat="server" ExpandAll="true" ID="SiteMapTree" PageLink="<%# IndexRoot %>">
                    <div class="sitemap_block">
                    <EPiServer:Property ID="Property1" PropertyName="PageLink" runat="server"  />

And this is my code behind:

public partial class Sitemap : EPiServer.TemplatePage
        protected void Page_Load(object sender, EventArgs e)
            //<a href="/ENRC/en-GB/">Home</a>
            PageData startPage = GetPage(PageReference.StartPage);

            HomeHyperLink.NavigateUrl = PageDataUtility.GetFriendlyUrl(startPage);
            HomeHyperLink.Text = PageDataUtility.GetNormalizedStringProperty(startPage, "Heading", false);


        private PageReference _indexRoot;

        /// <summary>
        /// Gets the page used as the root for the site map
        /// </summary>
        /// <remarks>If the IndexRoot page property is not set the start page will be used instead</remarks>
        public PageReference IndexRoot
                if (PageReference.IsNullOrEmpty(_indexRoot))
                    _indexRoot = CurrentPage["IndexRoot"] as PageReference ?? PageReference.StartPage;
                return _indexRoot;

        protected override void OnLoad(System.EventArgs e)



Any help would be hugly appreciated!! 

Thanks in advance 

Oct 04, 2010 11:38

The PageTree control is really not useful for displaying information in anything other than, well, a tree layout.

However, if I understand your question correctly, you would like to still use the PageTree control for the sitemap, but style the control so that it looks more like columns. If you look at the HTML markup that the PageTree control produces, you will notice it consists of nested <ul> and <li> elements.

Take this example:
You will see that the CSS required to make the level 2 elements appear as indented, looks something like this: #SiteMap li li a { style here }. The important thing to notice is the way the CSS declaration encompasses the nested <li> tags.

Download FireBug for FireFox to help you inspect HTML and CSS easily. Hope this helps you.


Oct 14, 2010 22:45

Thanks Arild. Ended up scrapping the whole pagetree thing and done it all in the code behind and it worked.


Oct 27, 2010 11:27

Could you explain your solution a bit more?

I have the same issue; Sitemap coded using the pagetree, lots and lots of pages on the site so there's far too much scrolling required if it is all displayed in one column.

I found a good article here explaining various ways to do multicolumn lists, however none of them appear it work brilliantly with a  sitemap structure.

Any help greatly appreciated. Thank you.

Apr 19, 2011 18:35

Like I said, styling a pagetree sitemap is really just a matter of styling a bunch of <ul>s and <li>s.

This is really more of a frontend-developer question than an EPiServer issue. Take a look at this example:

Apr 28, 2011 15:03
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.