{Theme} allows you to easily create Breadcrumbs with page navigation and background image. Image source and element height can be edited via data-attributes:
- data-bg-image
- data-height
Of course you need to use first basic HTML markup:
|
1 2 3 4 5 |
<div class="ct-breadcrumbs ct-js-breadcrumbs ct-u-marginTop50 ct-u-marginBottom70" data-bg-image="assets/images/demo-content/breadcrumbs1.png" data-height="260"> <div class="ct-breadcrumbs-title"> [title] </div> </div> |
The following script is responsible for Breadcrumbs:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var $breadcrumbs = $('.ct-js-breadcrumbs'); $breadcrumbs.each(function(){ var $this = $(this); var $breadcrumbsHeight = $this.attr("data-height"); var $breadcrumbsImage = $this.attr("data-bg-image"); $this.css({ "background-image": "url(\"" + $breadcrumbsImage + "\")", "height": $breadcrumbsHeight + "px" }); }); |
Breadcrumbs