In this tutorial, you will learn how to build a breadcrumb within an Episerver CMS powered website. Breadcrumbs are very useful UI components and luckily fairly easy to build. In order to create a breadcrumb, you will need to be aware of the GetAncestors() method. GetAncestors() will return a list of pages from the current page object, back to the start page. A code example of how to use GetAncestors() is shown below:
You can also get this information using IContentRepository and passing in a page object, like so:
Moving back to the breadcrumb, we will also need to use the CompareToIgnoreWorkID(ContentReference) method to stop at the start page and not the top-level root page. You will not want to show the root object as a broken link in your breadcrumb 🤪
CompareToIgnoreWorkID compares a ContentReference to another instance. The reason you should use this method is that it compares the ID and the ProviderName. This is safer than simply doing a comparison on the ID. For reference, there is also a similar Episerver override on the default .NET Equals() that compares ID, ProviderName and WorkID.
That covers all the code that you need to know about to get you going. How you design the UI is simple enough. Iterate through a list and create some links. A fully working example can be found from my GitHub account here. #ILoveEpiserver. Happy Coding 🤘
