Add Breadcrumb with SharePoint 2013 Design Manager

Introduction

One day, I was in need of having my custom breadcrumb with Design Manager feature in SharePoint 2013, so I dug into it and found that there is one code snippet to add breadcrumb in our HTML page of master layout. We just need to put the below snippet in any of our master pages or page layout where we want to place the breadcrumb.

<div id="breadcrumb">
<!--MS:<ASP:SITEMAPPATH runat="server" 
sitemapproviders="SPSiteMapProvider,SPXmlContentMapProvider" 
rendercurrentnodeaslink="false" hideinteriorrootnodes="true" 
RootNodeStyle-CssClass="bc-root">-->
<!--MS:<PATHSEPARATORTEMPLATE>-->
<!--MS:<ASP:IMAGE id="Image1" runat="Server" 
imageurl="/_catalogs/masterpage/images/breadcrumb_line.png">-->
<!--ME:</ASP:IMAGE>-->
<!--ME:</PATHSEPARATORTEMPLATE>-->
<!--ME:</ASP:SITEMAPPATH>-->
</div>

You can place this snippet into any HTML file of masterpage or page layout. Here, the image will work as path separator between items, you can place anything in between PATHSEPARATORTEMPLATE.

Through the above snippet, we can have custom breadcrumb for Publishing pages. Now to fulfill your requirement to have the actual branding, you can create or update CSS classes or write some scripts using jQuery.