Tuesday, April 10, 2012

Breadcrumbs partial for Umbraco 5

Umbraco 5 is a new CMS build from scratch using ASP.NET MVC 3. It is a departure from previous version which uses Web Forms.

However, due to the different architecture, the way to do breadcrumbs changed and I could not find any examples for the new version. So I came out with one =)

@inherits RenderViewPage
@using Umbraco.Cms.Web;
@{
    var current = DynamicModel;
    Stack<dynamic> pages = new Stack<dynamic>();
    while (current.Level > 1)
    {
        pages.Push(current);
        current = current.Parent;
    }
}
<ul class="breadcrumb">
  <li>
    <a href="@current.Url">home</a>
  </li>
  @foreach (var page in pages)
  {
    <li>
      &raquo; <a href="@page.Url">@page.Name.ToLower()</a>
    </li>
  }
</ul>

The stylesheet as follows

ul.breadcrumb {
    list-style-type: none;
    margin: 0 0 15px 0;
    padding: 0;
}
ul.breadcrumb li {
    display: inline;
}
ul.breadcrumb li a, .breadcrumb ul li a:visited {
    color: #036;
    text-decoration: none;
    padding: 0 5px;
}

No comments: