Skip to main content

I have been researching ways to adjust the Breadcrumb Navigation settings and I am currently stuck on this. Could some please give some advice or direction on this? 

 

Here is my scenario: Our page is setup to display Breadcrumbs in the following format:

< Back I Home > Admin Dashboard

Custom Styles CSS input: 

: /* ************************************** */

/* Makes the 'breadcrumb bar' a gradient. */

/* ************************************** */

 

 

/* doc-layout-breadcrumbs .breadcrumbs {

    background-image: linear-gradient(45deg,#0068D9 0%,#333333 20%)!important;

} */

 

 

doc-layout-breadcrumbs .hierarchical-breadcrumbs ui-icon {

    margin-right: 10 px;

 

It has been requested to extend the Breadcrumb Trail to show all steps the user took to get to the current page.

For example, <Back I Home > Page 1 > Page 2 > Page 3

 

Any assistance is greatly appreciated. 

Hey @justin.dean !

Unfortunately, that’s not currently a functionality in the platform


I just want to add something re: Custom CSS, because I think it’s important to know the limitations of what it can and can’t do.

It’s great for restyling things, of course. Changing fonts, colors, margins and such.

It’s also pretty good for hiding things you don’t want to be visible in Docebo, with the caveat that if you’re not careful with respect to how you do this, you might end up accidentally hiding the wrong thing.

 Here’s a good example of how to hide something breadcrumb-related without hiding the whole trail: 

 

And it can even add content that wasn’t already there in specific, limited cases. This typically involves using the content property, together with e.g. the ::before or ::after selectors to create pseudo-elements.

Critically, however, with CSS alone you can only use this last approach to bring in static information, i.e. content that doesn’t change. (If Docebo supported custom Javascript this would be a whole other conversation, but there are very good reasons why they don’t.)

What you want to add to the breadcrumb trail, however, is dynamic. Specific to each user and their context. This information is not there, unfortunately. And you cannot use CSS to add it.


Reply