Breadcrumb Navigation

Breadcrumb navigation can improve usability of websites with a deep sitemap structure.

What is Breadcrumb Navigation?

Breadcrumb navigation provides a trail of pages leading up to the users current location on the website. An example of breadcrumb navigation can be seen in the image to the right next to the "You are here:" text. In the example if not for the breadcrumb navigation the user would have no way of navigating back to the previous page, or the "Our Team" page.

Implementing Breadcrumb Navigation

Breadcrumb navigation can be implemented on Oncord through use of the <navigation:breadcrumbs> control element. The following attributes are commonly used with the breadcrumbs control, for a complete list see the API reference here.

Separator=">" - Sets the characters which separate the links between the breadcrumbs.

ShowHomePage="false" - Sets whether to show the home page in the breadcrumbs.

ShowCurrentPage="true" - Sets whether to show the current page in the breadcrumbs.

  • Navigation Code
  • CSS Styling
<p class="crumbs">You are here: <navigation:breadcrumbs id="sidebar_breadcrumb" showhomepage="false" /></p>

The Markup

The above navigation code will produce the following markup when a website renders;

<p class="crumbs"> You are here: <a href="/about/">About Us</a> › <a href="/about/our-team/">Our Team</a> › <a href="/about/our-team/web-designers/">Web Designers</a> › <a href="/about/our-team/media-producers/alex/">Alex</a> </p>