In today's web design world, many people spend a lot of time perfecting little things on their website. It shows how detail oriented you are; whether working on your own project or well a client's. One of the design elements that does not often get much attention in the DotNetNuke world is the site’s breadcrumb.
It's not that people don't design beautiful little elements to enhance their site, but it is generally perceived that the core skin object provides for limited customization without modifying the core. Well, in this article, I'm going to show you how to be creative in working with that we have without modifying the core to implement an iconic breadcrumb design.
I'm using the breadcrumb from http://apple.com website, which has visually appealing, yet subtle elements that is actually a very user friendly way to visualize the site’s navigation trail.
Outside of Apple’s implementation, the breadcrumb is often a very useful element for content heavy site and in the e-commerce world. I’ve provided the demo and the source below. Keep reading to find out more about the details of the implementation.
View Demo Download the Source
Before We Start:
This article assumes that you know the basics of DotNetNuke skinning. I will walk through a bit of core DotNetNuke breadcrumb configuration as well as some styling that help accomplishing the design. The purpose of this article is to show you that it is possible to achieve cool design without modifying the DotNetNuke core or creating your own skin object.
Step 1: Adding the Breadcrumb Skin Object
Register the breadcrumb control at the top of the skin file:
Place the breadcrumb element in the desired location. It renders the basic breadcrumb path for the site.
Step 2: Breadcrumb Level Explained
There are 3 options to configure the breadcrumb behavior.
- 0: Show the entire path of the site breadcrumb and current page you're on
- -1: Show the entire path of the site breadcrumb including 'Root' item which allows users to return to the root of the DotNetNuke instance. If you have multiple portals on your DNN instance and want to limit users just to be able to access the homepage of that portal, this is not an option to use.
- n: where n is an integer greater than 0, it will skip n breadcrumb tabs before displaying the links
In this example, I'm going to use '0' to show pages with a full path excluding the 'Root' item.
Since we select the option to display links at level 0, we need to create a way for people to return to home page. I'm going to create a simple HTML static link and give it a CSS selector for ease of styling.
Step 3: Adding Seperator
You can add a simple pipe (|) or a greater than (>) symbol to the breadcrumb as follow:
Or you can add HTML and CSS selector to allow creativity:
The above markup may look complicated, but it is really just Separator="<span></span>" written safely in XML encoding format so DNN will render it properly. I added the HTML span tag so we can target it using CSS to display a background image for the separator instead of an HTML character.
Step 4: Sprinkle in Some Style
Now that we have the breadcrumb in place, we need to create the CSS to accomplish our design. But first, let's take a look at the HTML output so we have a better understanding of which elements we should style with CSS.
Let's wrap this breadcrumb in a DIV so I can add a background image:
Now for the CSS
Set the background for the entire breadcrumb and some additional styling:
Reset the SPAN element to behave as block element instead of inline:
Set the background for the separator and some additional styling to properly position it between links:
We want to add a little padding/spacing between links. But since they are inline elements, we need to turn them into block elements:
Set the background for the return to homepage link to an icon:
Step 5: Putting it All Together
HTML:
CSS:
Here you go! Hope this article helps to give a better understanding of going out of the box for the breadcrumb design in DNN web site. Feel free to let me know if you have any questions. Enjoy!
View Demo Download the Source