Breadcrumb Navigation
Breadcrumb navigation is a method to improve the usability of websites with a deep sitemap structure.
What is Breadcrumb Navigation?
Breadcrumb navigation offers users a visual pathway indicating the sequence of pages leading to their current location. This type of navigation is particularly beneficial for websites that have a deep or complex sitemap structure, helping users to quickly determine their current position, and providing them with an easy method to return to where they were previously.
As an example, here's how breadcrumb navigation would appear on this page:
Home > Developer > Tutorials for Web Developers & Designers > Navigation > Breadcrumb Navigation
Implementing Breadcrumb Navigation
Breadcrumb navigation can be implemented through use of the <navigation:breadcrumbs> UI control. This control will dynamically generate a list of breadcrumb links, using the Page Title as the link text.
The following attributes are commonly used when configuring breadcrumb navigation, for a complete list see the API reference here.
Separator - Sets the characters to separate links.
ShowHomePage - Sets whether to show the home page.
ShowCurrentPage - Sets whether to show the current page.
The Markup
The above code will produce the following HTML mark-up:
CSS Styling Breadcrumb Navigation
Unlike most other UI Controls, neither an ID or classes will render within the HTML mark-up produced by the <navigation:breadcrumbs> control.
To address this, as illustrated in the above examples, we suggest encapsulating the <navigation:breadcrumbs> UI control within an element for CSS targeting. Typically, this involves using a Paragraph <p> element with a designated ID or class.
An Example:
