Best Approach for Implementing Breadcrumb Navigation in Kentico ?
Hello Kentico Community,
I’m looking to implement breadcrumb navigation on our website to help users understand their current location within the site’s hierarchy. The breadcrumbs will appear above the hero banner, with links to parent pages, allowing users to easily navigate back to previous sections.
I’m wondering what the best approach would be for implementing this in Kentico. Should I:
- Use a specific Kentico feature or module to build the breadcrumbs dynamically?
- Manually create the breadcrumb links in the page templates?
- Implement a custom solution using Kentico’s API or MVC functionality?
Any advice or best practices on how to implement breadcrumbs efficiently in Kentico would be greatly appreciated.
Thank you!
Answers
Usually bread crumbs you want to be dynamic.
The Baseline has a Navigation module that has the breadcrumb logic already done, you can either use it or borrow it. The big thing is to just identify which Web Content Types should be valid breadcrumbs, in most cases all of them, but sometimes you do want to exclude something from the breadcrumb list. The other thing is often you want to manually add the "Home" page to the breadcrumb, even though it's not a parent of the current page.
Here's the Breadcrumb Repo. This uses some of the Baseline's Identity system but you should be able to figure it out if you want to reverse engineer.
If you want to use the actual Baseline features, here's the installation:
My aproach is from early XbK times, but it still works.
I use the "WebPageUrlPath" to achieve this.
public static async Task<List<IWebPageFieldsSource>> RetrieveBreadcrumbNodes(
IWebPageDataContextRetriever pageRetriever, RoutedWebPage page)
{
List<IWebPageFieldsSource> pageItems = [];
string fullPath = page.GetWebPageFieldsSource().Result.SystemFields.WebPageUrlPath;
List<string> breadcrumbPaths = [];
while (!string.IsNullOrWhiteSpace(fullPath))
{
breadcrumbPaths.Add(fullPath);
fullPath = fullPath.Contains('/')
? fullPath[..fullPath.LastIndexOf('/')]
: "";
}
ContentItemQueryBuilder builder = new ContentItemQueryBuilder()
.ForContentTypes(item =>
{
item.ForWebsite();
item.OfReusableSchema(IBasepage.REUSABLE_FIELD_SCHEMA_NAME);
})
.Parameters(outerQuery =>
{
outerQuery.Where(record =>
{
record.WhereIn(
nameof(WebPageFields.WebPageUrlPath),
breadcrumbPaths);
record.WhereFalse(
nameof(IBasepage.BasePageHideInBreadcrumb));
});
})
.InLanguage(pageRetriever.Retrieve().WebPage.LanguageName);
IContentQueryExecutor executor
= CMS.Core.Service.Resolve<IContentQueryExecutor>();
pageItems = (await executor.GetMappedWebPageResult<IWebPageFieldsSource>(builder))
.ToList();
return pageItems;
In the view I do this afterwards:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
@foreach(IWebPageFieldsSource node in Model.BreadcrumbNodes)
{
if (Model.Page.SystemFields.WebPageItemID.Equals(node.SystemFields.WebPageItemID))
{
<li class="breadcrumb-item active" aria-current="page">@node.GetPageName()</li>
}
else
{
<li class="breadcrumb-item"><a href="/@node.SystemFields.WebPageUrlPath">@node.GetPageName()</a></li>
}
}
</ol>
</nav>
Trevor Fayas
Thanks for sharing those links! Unfortunately, due to current project constraints, I’m unable to use third-party NuGet packages—including the Baseline libraries.
Elmar Höfinghoff
Also, I tried your code but unfortunately it was not working with latest version
Appreciate any guidance you can provide!
To answer this question, you have to login first.