Skip to main content
Best Answer

Anyone get breadcrumbs with custom pages to work properly?

We have found that users rarely use the Universal Search or the Catalog page filters and would like to include some instructions at the top of the page. The only way to do this, I think, is by creating a custom page and then adding the Catalog (all catalogs) widget to it in a block below a block containing the instructions. That’s easy enough, but the problem is when a user clicks on a catalog link on that page to view that catalog’s courses, the breadcrumb navigation assumes they are coming from the built-in Course Catalog page. Similar situation for Coach & Share channels.

Is there a workaround for this aside from hiding the breadcrumbs via css? I’d like to keep the breadcrumbs if possible.

In summary:

  1. User navigates to a custom page titled “Course Catalog”.
  2. User clicks on a catalog link on that page to view all courses within that selected catalog.
  3. User then uses the breadcrumbs to go “Back” and is brought back to the built-in Course Catalog page, not the custom replacement.

 

14 replies

lrnlab
Rank
Userlevel 7
Badge +8

Hi @mark I can only assume that since the widget essentially takes you to the same page (Course catalog) the breadcrumb doesn’t get that it needs to go back to the custom page...it is odd though..

I tried it from a custom page that does NOT use the widget but rather just a link to the catalog page (docebosaas.com//learn/catalog) and it does work. The BACK option goes back to the custom page...you might try something like this instead?

M
Rank
Userlevel 5
Badge +1

Thanks @lrnlab. Unfortunately I don’t think that would work - we really want to add some introductory text (primarily instructions) and then just use the catalog widget showing all catalogs. Ideally we could just add a custom block to the built-in catalog page : (

When we first implemented Docebo a couple of years ago we ran into this issue and we eventually just disabled the breadcrumbs completely via custom style. I hate to have to do that again but may resort to that. Bummer.

Bfarkas
Rank
Userlevel 7
Badge +4

Thanks @lrnlab. Unfortunately I don’t think that would work - we really want to add some introductory text (primarily instructions) and then just use the catalog widget showing all catalogs. Ideally we could just add a custom block to the built-in catalog page : (

When we first implemented Docebo a couple of years ago we ran into this issue and we eventually just disabled the breadcrumbs completely via custom style. I hate to have to do that again but may resort to that. Bummer.

I’ve been thinking about the same too, the breadcrumbs are too often misleading or not proper.

Alan
Rank
Userlevel 6
Badge +2

Hi @mark 

We face the same issue. Our solution is to use CSS to hide only the offending Course Catalogue breadcrumb, rather than the entire bar. Adding the following into your Custom Styles will do the trick:

 

  /* Hides My Courses and Learning Plans link in the breadcrumb bar */

  /* Hides the actual link */

  .hierarchical-breadcrumbs a[href="/learn/mycourses"]{

       display: none!important;

   }

   /* Hides the arrow after the link */ 

   .hierarchical-breadcrumbs a[href="/learn/mycourses"] + .ui-icon{

       display: none!important;

   }

Alan Clifford
steveninfinger
Rank
Userlevel 7
Badge +6

I have this setup in our system (custom page > widget with instructional text > widget with catalog). When I click on the header link for the catalog, I see what you’re saying about the breadcrumb. If I click back I do go back to the custom page. I guess I just rarely click on the links within the breadcrumbs. Are they breadcrumbs what you click on or expect your users to click on?

Steven Infinger
M
Rank
Userlevel 5
Badge +1

@steveninfinger we have often had users complain about the breadcrumb navigation not working as expected.

M
Rank
Userlevel 5
Badge +1

@Alan this is excellent! Thank you for this. I had no idea we could target elements based on their href value with css. I think this should work very well and also can be implemented to solve the similarAll Channels breadcrumb issue. Awesome!

Alan
Rank
Userlevel 6
Badge +2

Thanks, @mark, I’m glad to hear it solves your problem!  It’s always a good feeling when you win a little battle against the LMS :-)  

Alan Clifford
achess23
Rank
Userlevel 2

Thanks for sharing. I have the same requirements (custom catalog page with widgets) and notice that the system-built Catalog page keeps turning up.  I used the custom CSS provided by Alan, but the link still shows up in the breadcrumb if you were to open a LP or individual course. I would like to hide the breadcrumb completely.  Does anybody have the custom CSS for that by chance?  Is this recommended or cause any issues for students?

 

Thanks in advance!

C
Rank
Badge

The breadcrumbs not working correctly was a tiny thing but driving me crazy! Thanks so much @Alan for sharing this - it worked perfectly for me! 

Annarose.Peterson
Rank
Userlevel 7
Badge +6

Thanks for sharing. I have the same requirements (custom catalog page with widgets) and notice that the system-built Catalog page keeps turning up.  I used the custom CSS provided by Alan, but the link still shows up in the breadcrumb if you were to open a LP or individual course. I would like to hide the breadcrumb completely.  Does anybody have the custom CSS for that by chance?  Is this recommended or cause any issues for students?

 

Thanks in advance!

@achess23  I have used this in the past to remove the breadcrumbs entirely: 

#doc-layout-breadcrumbs .navigation-history,
#doc-layout-breadcrumbs .hierarchical-breadcrumbs {
  display: none;
}

But we ended up removing it because we had a difficult time with some administration. For example building ILTs, because it was easier to use the breadcrumb to navigate between the session/event levels in the ILT course shell. 

If you are using extended enterprise with a separate domain, then it is useful because you can apply this CSS only to the specific domain for your users and then do your administration on a different domain.

Annarose Peterson (She/Her)
MartinColes

Thanks all for these solutions, we have had the same issues, and now have simply been resoved.

Thanks All!!

Bfarkas
Rank
Userlevel 7
Badge +4

This thread should get marked for the product team, its a solid example of how the current implementation of breadcrumbs is almost useless. The custom page area really suffers from, but is probably a larger issue of not being able to setup hierarchies on the menus.

L
Rank
Userlevel 3

@Alan , this was super helpful.  I implemented it and it got me 75% of the way there.  What i’m really looking for is for the breadcrumb trail to reflect the path the user took, so i wanted to replace the my courses, with the page they came from.

I’m not a CSS expert by any means, but is there code that could tell the system to do that.

 

@Bfarkas absolutely agree!

Reply


Terms & ConditionsCookie settings