FAQ content

Look & Feel: Customize or hide the breadcrumbs on your public LibGuides pages

In this article

At the top of each public page, you'll find the breadcrumbs: a trail of links to help you navigate your way back from the page you're viewing to your LibGuides homepage. Although some pages will have more breadcrumbs than others, you can generally expect them to have the following structure:

  • System-level pages (e.g. homepage, A-Z Database List, search results): Institution Name / System Name / Page Name
  • Guide pages: Institution Name / System Name / Guide Name / Guide Page Name

The HTML code of breadcrumbs

For all pages that have a layout template, the breadcrumbs are inserted by the following code:

<div id="s-lib-bc">
  {{breadcrumbs}}
</div>

When a user visits a page, LibGuides displays the actual breadcrumbs where the {{breadcrumbs}} template keyword is placed. The breadcrumbs themselves are an ordered list (<ol>) element, styled so that each list item is displayed in a row. For example, the breadcrumbs on the system default homepage will look something like this:

<div id="s-lib-bc">
  <ol id="s-lib-bc-list" class="breadcrumb">
    <li id="s-lib-bc-customer"><a title="Springshare" href="https://springshare.com/">Springshare</a></li>
    <li id="s-lib-bc-site"><a title="SpringyLib Guides" href="https://springylib.libguides.com/">SpringyLib Guides</a></li>
    <li id="s-lib-bc-page" class="active">Home</li>
  </ol>
</div>

As you can see, the container <div> as well as all list elements have their own IDs, which make it possible to apply your own custom styles to one or all of the breadcrumbs.

Breadcrumbs by page

To view the default structure of the breadcrumbs on a public page, including their element IDs, click on the panels below.

[Return to top]


How do I hide a specific breadcrumb?

To hide a specific breadcrumb, you will need to add some custom CSS code to LibGuides.

The code you would need may look like this:

<style>
#s-lib-bc-page {
  display: none;
}
</style>

In this example, the code would hide the Page Name breadcrumb. To use this yourself, simply copy the code above and replace s-lib-bc-page with the ID of the breadcrumb you want to hide (see Breadcrumbs by Page section above for a breakdown of IDs by page).

[Return to top]


How do I hide all of the breadcrumbs?

There are actually two ways you could approach this: using custom CSS code, or removing the breadcrumb elements from your page templates.

Using custom CSS code

One option for hiding all breadcrumbs is by adding some custom CSS code to LibGuides. This takes less work than removing breadcrumbs from each page template; plus, it would also apply to pages that do not have templates -- such as the system blog. The code you would need is:

<style>
#s-lib-bc {
  display: none;
}
</style>

To use this yourself, simply copy the code above and paste it in the appropriate Custom JS/CSS Code box.

Using custom page templates

You can also remove breadcrumbs from most pages by creating custom templates. Keep in mind that not all pages have templates, such as the system blog, system discussion board, and E-Reserves pages. For guides, you would also need to ensure that all guides are using your custom template (this is easier if you have locked each guide into a specific template).

When editing a template, you can remove the breadcrumbs by deleting the following code:

<div id="s-lib-bc">
  {{breadcrumbs}}
</div>

For best results, we do not recommend using comment tags to hide elements in page templates.

[Return to top]