Web pattern library, style and technical reference
Both cookie-trail styles are used with transparent backgrounds so that the underlying header or background image shows through. Background colours shown in examples below are for demonstration purposes only. The cookie trail style can be set by web publishers using the UON.Page.CookieTrailStyle field on the metadata screen. The cookie trail functionality is defined in the 'UON 2016' Design file (#222982), and can be adjusted in individual Design Customisations if necessary.
<div id="cookie-trail"> <ol> <li class="home-link"><a href="#"><span class="fa fa-home"></span></a></li> <li><a href="#">Parent page</a></li> <li><a href="#">Child Page</a></li> <li class="current"><a href="#">Current page</a></li> </ol> </div>
<div id="cookie-trail cookie-trail-light"> <ol> <li class="home-link"><a href="#"><span class="fa fa-home"></span></a></li> <li><a href="#">Parent page</a></li> <li><a href="#">Child Page</a></li> <li class="current"><a href="#">Current page</a></li> </ol> </div>
The default 'cookie trail' is configured within the main 'UON 2016' parse file (asset #222982). It can be replaced with a full custom cookie trail using the 'cookie_trail_custom' nested content design area, this may be used for sections such as scholarships or researcher profiles where the individual items don't exist as distinct assets as the are sourced froma web service, and in this case the default cooke ite trail would not accurately reflect the individual page being viewed.
<MySource_AREA id_name="cookie_trail" design_area="asset_lineage"> <MySource_DIVIDER></MySource_DIVIDER> <MySource_SET name="prefix_with_divider" value="false" /> <MySource_SET name="suffix_with_divider" value="false" /> <MySource_SET name="prefix_with_home_link" value="false" /> <MySource_SET name="suffix_with_current_link" value="false" /> <nav id="cookie-trail" aria-label="breadcrumb" role="navigation" class="<MySource_PRINT id_name='__global__' var='asset_metadata_UON.Page.CookieTrailStyle' />"> <div class="inner"> <MySource_SET name="levels_to_print" value="0" /> <ol> <li class="home-link"><a href="<MySource_PRINT id_name='__global__' var='site_link' full_url='true' />" title="UON Homepage"><span class="fa fa-home"></span></a></li> <MySource_ASSET> <li><a href="<MySource_PRINT var="asset_link" />"><MySource_PRINT var="asset_name" /></a></li> </MySource_ASSET> <li class="current-page"><MySource_PRINT id_name="__global__" var="asset_name" /></li> </ol> </div> </nav> </MySource_AREA> <MySource_AREA id_name="cookie_trail_custom" design_area="nest_content" print="no" />