Hub Hack: Hide breadcrumb links from Item pages

Follow

Objective

Use these Custom Code snippets to hide the "breadcrumb links" element that appears near the top of Item pages:

image.png

You can choose between two options:

For both options, you can also choose whether to apply it universally to all Item pages in a Hub, or just to Item pages when viewed in the context of a specified Streams.

Warning

Hub Hacks are not official Uberflip features.

Hub Hacks may not work on all Hubs or may cause unexpected behavior. If you experience issues with a Hub Hack, available support is limited to helping you disable the Hub Hack only.

 

Details

  • Type: CSS
  • Placement: Head
  • Notes: You'll need to choose the appropriate code snippet based on the version of the Uberflip Hub Front End that your Hub is using. If you're not sure which version you are on, see this article for instructions.

Code

Option 1: Hide the Stream link only

This option will hide just the link back to the Stream level from the breadcrumb links element, leaving the other parts (link to home and the name of the Item) intact.

Apply to all Item pages

Use the following code to hide the Stream-level link from the breadcrumb links element across all Item pages in all Streams.

For Front End V1 Hubs:

<style>
a.uf-breadcrumb.uf-breadcrumb-stream,
.bread-crumbs.item-level span:nth-child(2) {
  display: none;
}
</style>

For Front End V2 Hubs:

<style>
#uf-item-container > div > div > nav > ol > li.uf-breadcrumb-home,
#uf-item-container > div > div > nav > ol > li.uf-breadcrumb-home {
    display: none;
}
</style>

Apply to Item pages in a specific Stream only

Use the following code to hide the Stream-level link from the breadcrumb links element only on Items pages within a specified Stream.

  • To specify the Streams, replace instances of XXXX in the code with the relevant Stream ID.

For Front End V1 Hubs

<style>
.stream-XXXX a.uf-breadcrumb.uf-breadcrumb-stream,
.stream-XXXX .bread-crumbs.item-level span:nth-child(2) {
  display: none;
}
</style>

For Front End V2 Hubs

<style>
.stream-XXXX #uf-item-container > div > div > nav > ol > li.uf-breadcrumb-home
{
    display: none;
}
</style>

Option 2: Hide the entire Breadcrumb links element

Apply to all Item pages

Use the following code to hide the entire breadcrumb links element across all Item pages in all Streams.

For Front End V1 Hubs

<style>
.bread-crumbs {
display: none;
}
</style>

For Front End V2 Hubs

<style>
.uf-article-page .uf-article-page-header
.uf-breadcrumbs-container .uf-breadcrumbs {
display: none;
}
</style>

Apply to Item pages in a specific Stream only

Use the following code to hide the Stream-level link from the breadcrumb links element only on Items pages within a specified Stream.

  • To specify the Streams, replace instances of XXXX in the code with the relevant Stream ID.

For Front End V1 Hubs

<style>
.stream-XXXX .bread-crumbs {
display: none;
}
</style>

For Front End V2 Hubs

<style>
body[data-stream-id="XXXX"].uf-article-page .uf-article-page-header
.uf-breadcrumbs-container .uf-breadcrumbs {
display: none;
}
</style>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.