Sharepoint Refinement Breadcrumb

Question

As per Attached, How to create the refinement breadcrumb in SharePoint?

Please help me. Thank you...

Answer 1

We can use jQuery to achieve it, the code below for your reference:

<script src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { 
    buildBreadcrumb();
    $("select[title='Department']").change(function(){
        buildBreadcrumb();
    });
    $("select[title='Branch']").change(function(){
        buildBreadcrumb();
    });
    $("select[title='Sub Branch']").change(function(){
        buildBreadcrumb();
    });
});
function buildBreadcrumb(){
    var department = $("select[title='Department']").val();
    var branch = $("select[title='Branch']").val();
    var subBranch = $("select[title='Sub Branch']").val();
    $("#refBreadcrumb").html(department+">>"+branch+">>"+subBranch);
}
</script>
<div id="refBreadcrumb"></div>