Fixing the DNN Breadcrumb Skin Object
We've all seen them; the bar of links usually found at the top of websites with multi-level navigation. Location breadcrumbs aide visitors in traversing content-rich sites by providing feedback on how "deep" visitors have navigated into the site and on how to get back where they came from. If properly implemented as text links, breadcrumbs also provide SEO benefits by allowing search engine spiders to more effortlessly crawl web content.
The DNN breadcrumb skin object, which is installed by default, makes it easy to implement breadcrumbs in your skins so there is really no excuse not to use them. Placing this line <dnn:Breadcrumb runat="server" id="dnnBreadcrumb" RootLevel="0" /> into your ascx-based skin renders the path to the currently selected tab in the form of TabName1 > TabName2 > TabName3. Optionally, you may specify a breadcrumb separator and a CSS class.
The only rub that I have with DNN's breadcrumb skin object is that the last item in the trail also renders as a link. You may think "what's the big deal," but I like to argue that this shortcoming works against the very benefits discussed above. Why would I want to navigate to the page that I'm already on?
So what's a dedicated DNNer to do? Here are 3 approaches one might take to "fix" the DNN breadcrumb skin object:
- Hack the breadcrumb trail with JavaScript.
- Modify the DNN skin object code.
- Write a custom breadcrumb skin object.
Let's look at these approaches one at a time.
JavaScript Hack
We simply target the last item in the breadcrumb trail and remove the href attribute. We then adjust the style due to the fact that even without a href attribute the <a> tag remains, which means it takes on the default link style although it's not a "live" link. Download the script here. Not the most elegant solution, but it works.
Modify the DNN Skin Object Code
This time around we add an additional public property - LastAsSpan - to the Public Members region of breadcrumb.ascx.vb that allows us to enable or disable the rendering of the last item in the breadcrumb trail as a link. Still in breadcrumb.ascx.vb, we then turn our attention to the Page_Load event handler and add a few lines of code that ultimately process our new setting. Download the commented code and then backup and replace breadcrumb.ascx.vb in admin/skins. No recompiling necessary, but you may have to restart DNN to clear the cache. For the politically correct, this constitutes a DNN core change and therefore gets overwritten by subsequent DNN upgrades. So again, far from ideal and more an illustration of concepts then a real-world solution.
Write a Custom Skin Object
This approach makes the most sense on all fronts and follows the "official" guidelines on extending DotNetNuke. Just install the custom skin object, register the new control and change the breadcrumb declaration in your existing skins and you are done. More details in the free download. I'm only a DNN module developer during REM though, so for anyone interested in the nitty-gritty of writing your own skin objects, keep an eye on Mitchel Sellers' blog later this week.
So there you have it, 3 roads to breadcrumb heaven. I'll leave it up to you to decide what approach works best for your unique situation.
In closing, I would like to thank Vasilis Terzopoulos and Mitchel Sellers for their generous contributions to this post. As always, post your comments and questions below. And if you have enjoyed this material, consider subscribing to our RSS feeds or signing up to get blog updates by email.
Name (required)
Email (will not be published) (required)
Website