Breadcrumb

A guide to Hantsweb's site wide navigation

Overview

The breadcrumb is the default site-wide navigation on Hantsweb. It can be added to the top of a page, and shows the navigation path of that particular page.

All pages in Hantsweb use it.

Example
WCMS use

1. Breadcrumbs get populated automatically whenever a new page is created. It will be at the top of the page with the correct navigation path.

2. However, it is also possible to add breadcrumbs to appropriate placeholders. To add a breadcrumb to a page, select an appropriate placeholder at the top of the page in Experience editor

3. Select 'add here' and then Rendering>Building blocks>Navigation>Breadcrumbs

4. This should automatically populate the breadcrumb with the correct navigation path

MVC.net use
Code

It observes the following structure:

<div class="row remove-bottom" id="global_container_breadcrumb">
 <div class="right two columns watermark-phone"><img src="wcms-hcc-logo.png"  alt="Hampshire County Council" class="scale-with-grid" /></div>
 <div class="left show-on-phones-and-tablets">
  <a data-ismenu="yes" data-menu-position="left" data-menu-slide="yes" data-link-for="global_breadcrumb" title="breadcrumbs" href="mainmenu.html">
   <i class="icon stack"></i>
  </a>
 </div>
 <ul class="inline breadcrumb show-on-desktops" id="global_breadcrumb">
  <li class="mm-label show-on-phones-and-tablets">You are here:</li>
  <li><a href="wf">Services</a></li>
  <li><a href="wcms-wasteandrecycling">Waste and recycling</a></li>
  <li><a href="wcms-recycle-home">Recycling centres</a></li>
  <li><a href="wcms-recycle-centres">Your nearest centres</a></li>
 </ul>
</div>
Version and status
  • 1.0
  • current version
  • Concept
  • Alpha
  • Beta
  • Release