[Silk UI Web] use breadcrumb in a layout-webblock

[Silk UI Web] use breadcrumb in a layout-webblock

Forge Component
Published on 17 Oct (8 days ago) by OutSystems Labs
45 votes
Published on 17 Oct (8 days ago) by OutSystems Labs

Usecase: have all pages using a breadcrumb, but the first level is always filled with a default-link.

solution: insert in every page the breadcrumb-widget in a placeholder, and manually set the first level to that default-link.

but what I really want is to have the breadcrumb already in place in the layout-webblock.
and have only level2 - level5 available.

this means I have to create placeholders over the breadcrumb-placeholders.
This works, but js_hide_parent_if_empty doesn't work anymore.

what's the best/easiest way to fix this?

cloning the breadcrumb i don't like, because I copy/paste i need to also copy-paste the action.
(and for some reason the if-statement is not copied correctly)

Hi there J!

Thanks for reaching us, I followed your steps and in fact, using the breadcrumbs pattern right on the layout will create a poblem, the js_hide_parent_if_empty is working, but because you have a placeholder inside it, the arrow is visible.

The simple way to go here is to just put your #1 link in a web block and use it across your aplication, since you will have to add the other breadcrumbs manualy, using this web block one time should be easy and changing the link is done in a single place.

If you really want to use the breadcrumbs on the layout, a little trick is to put this script in the document ready to hide the arrows. Make sure to set the Style of your new placeholders to "CustomPlaceholder" or other of your choice, and use the same in the script, but keep in mind that this goes beyond the standard way of using the pattern.

$(".CustomPlaceholder").each(function() {
    if($(this).html() == "") {
My regards,
Dinis Carvalho