A pergunta e respostas já existem aqui, mas acho interessante colocar mais um exemplo de breadcrumb, considerando que deixei a abordagem mais simples nos últimos tempos.
As informações para montagem de um breadcrumb de até 3 níveis já existem no MVC, dentro de ViewContext
. Um exemplo pode ser feito da seguinte forma:
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="~/">Meu Sistema</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="~/@ViewContext.RouteData.Values["controller"]">@(Linguagem.ResourceManager.GetString(ViewContext.RouteData.Values["controller"].ToString()) ?? ViewContext.RouteData.Values["controller"].ToString())</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="~/@ViewContext.RouteData.Values["controller"]/@ViewContext.RouteData.Values["action"]/@(ViewContext.RouteData.Values["id"] ?? "")">@(Linguagem.ResourceManager.GetString(ViewContext.RouteData.Values["action"].ToString()) ?? ViewContext.RouteData.Values["action"].ToString())</a>
</li>
</ul>
Linguagem
é um arquivo de resource (.resx
) que contém todas as strings de nomes próprios de Controllers.
O CSS é baseado no template Metronic, cujo CSS coloco abaixo:
.page-bar .page-breadcrumb {
display: inline-block;
float: left;
padding: 10px 6px;
margin: 0;
list-style: none;
}
.page-bar .page-breadcrumb > li {
display: inline-block;
}
.ie8 .page-bar .page-breadcrumb > li {
margin-right: 1px;
}
.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > span {
color: #888;
font-size: 13px;
text-shadow: none;
}
.page-bar .page-breadcrumb > li > i {
color: #aaa;
font-size: 14px;
text-shadow: none;
}
.page-bar .page-breadcrumb > li > i[class^="icon-"],
.page-bar .page-breadcrumb > li > i[class*="icon-"] {
color: #8c8c8c;
}