Back to blue

Breadcrumbs

Standard

  1. Home
  2. Homeowners
  3. Home Alarm & Security Systems

The use the breadcrumb snippet, we need to include the CSS:

<link rel="stylesheet" media="all" href="/static/css/ca_sg_breadcrumbs.css" />

The needed markup for the template is as follows:

<div class="ca-breadcrumbs" aria-label="Breadcrumb"> <ol class="ca-breadcrumbs__wpr"> <li class="ca-breadcrumbs__itm"> <a class="ca-a ca-a--no-undln ca-breadcrumbs__lnk" href="http://localhost">Home</a> </li> <li class="ca-breadcrumbs__itm"> <a class="ca-a ca-a--no-undln ca-breadcrumbs__lnk" href="{link}">Homeowners</a> </li> <li class="ca-breadcrumbs__itm" aria-current="page"> Home Alarm &amp; Security Systems </li> </ol> </div>

With Time

  1. Home
  2. Homeowners
  3. Home Alarm & Security Systems

The needed markup for the template is as follows. This version contain the last item as an <a>:

<div class="ca-breadcrumbs" aria-label="Breadcrumb"> <ol class="ca-breadcrumbs__wpr"> <li class="ca-breadcrumbs__itm"> <a class="ca-a ca-a--no-undln ca-breadcrumbs__lnk" href="http://localhost">Home</a> </li> <li class="ca-breadcrumbs__itm"> <a class="ca-a ca-a--no-undln ca-breadcrumbs__lnk" href="{link}">Homeowners</a> </li> <li class="ca-breadcrumbs__itm" aria-current="page"> Home Alarm &amp; Security Systems </li> </ol> <time class="ca-time" datetime="2018-02-27" itemProp="datePublished"> {% include "frontend/icons/rebrand/clock.html" %} Updated on 02/27/2018 </time> </div>