Forum Discussion
CarolineS
Boss
I'm happy to make a minor customization if needed. How do I create a custom breadcrumb?
TariqHussain
7 years agoBoss
CarolineS - This is just a basic example for PrivateNote page breadcrumb-
Create a custom component e.g pvt-msg-breadcrumb
<ul role="list" id="list" class="lia-list-standard-inline custom-bradcrumb"> <li class="lia-breadcrumb-node crumb"> <a class="lia-link-navigation crumb-community lia-breadcrumb-community lia-breadcrumb-forum" id="link" href="/">Community</a> </li> <li aria-hidden="true" class="lia-breadcrumb-seperator crumb-community lia-breadcrumb-community lia-breadcrumb-forum"> <span class="separator">:</span> </li> <li class="lia-breadcrumb-node crumb final-crumb"> <a class="lia-link-navigation crumb-community lia-breadcrumb-community lia-breadcrumb-forum" id="link" href="/t5/notes/privatenotespage">Private Message: Inbox</a> </li> </ul>
Add this component to the same place where OOTB breadcrumbs component is added(Might be inside header quilt).
Using the CSS hide the default breadcrumb and show this one on PrivateNote page.
The second solution, you can also replace the OOTB private message link using jQuery for that you do not need to create any custom component.
e.g
Add this script on the page and check if this is working.
$(document).ready(function(){
jQuery(".PrivateNotesPage .final-crumb").html('<a class="lia-link-navigation crumb-community lia-breadcrumb-community lia-breadcrumb-forum" id="link" href="/t5/notes/privatenotespage">Private Message: Inbox</a>');
})
Related Content
- 8 years ago
- 2 years ago
- 11 years ago
- 4 years ago