How To Display A List Of Links In Episerver?

Displaying a list of links on a page is a very common requirement on most websites. The most common example I see is a list of most frequently used links in the footer, like so: episerver_linkitem_collection_example Luckily, Episerver has a very easy property to allow us to achieve this type of effect very easily within the CMS. In today's guide, we're going to cover how you can implement a similar type of functionality within your site.


When you want to create a collection of links, you can use the built in LinkItemCollection property (you can find more information about this here). To implement the LinkItemCollection in your site, you first need to define a property within one of your pages or blocks.
        [Display(Name = "Footer Links",
            GroupName = SystemTabNames.Content,
            Order = 100)]
        public virtual LinkItemCollection FooterLinks { get; set; }
After you have your property defined, CMS content editors will be able to see a control that will allow them to add as many links as they want. linkitemcollection episerver_linkitemcollection_example If you are using MVC in your view you can render your links by iterating through the collection:
      foreach (var link in Model.FooterLinks)
           <a target="@link.Target" href="@Url.PageUrl(link.Href)">


There you have it!  Displaying a list of links in EPiSErver is very easy using the inbuilt properties. When you use LinkITemColelction you can link to internal or external links

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

Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();