The question and answers already exist here, but I find it interesting to put another example of breadcrumb, whereas I have left the simplest approach in recent times.
The information for mounting a breadcrumb up to 3 levels already exist in MVC, within ViewContext
. An example can be done as follows:
<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
is a file of Resource (.resx
) which contains all the strings of first names of Controllers.
THE CSS is based on the Metronic template, whose CSS I put below:
.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;
}
I have one more algorithm that I have assembled here and that is a little simpler than the one I have marked. If you want, I reopen the question and put it.
– Leonel Sanches da Silva
If you manage to leave both examples, it would be interesting. I had not searched as breadcrumb
– Tiedt Tech