Breadcrumbs

'Breadcrumbs' allows breadcrumb trails to be created and managed easily. All it takes is a single option on a page to select a page parent and the component will create full breadcrumb trails on a layout. 'Breadcrumbs' supports disabling and hiding sp

Back to Breadcrumbs Support

Daniel81
Daniel81

Hi,

Just a quick suggestion, in the "Crumb Title", could we also have the ability to pull in any URL parameters?

E.g:

For a blog post, the URL would be /blog/post/:slug, but as it stands you either have to select "Remove From Breadcrumbs" for this page as you get "Blog Post" as the crumb title, or you need to set the "Crumb Title" to something generic like "Post". Could we have it so that if we set the "Crumb Title" to the same URL parameter, :slug in this case, it will pull through the title of the post as the crumb, so you would end up with 1. Blog > 2. Name of Post (:slug) instead of 1. Blog > 2. Blog Post as the breadcrumbs?

Hope that makes sense :)

Last updated

jared.meyering
jared.meyering

This is something I'm thinking about, the problem is the 'slug' is typically something not usable in the context of a breadcrumb because slug typically comes across as "my-blog-post" or something else, not actually the formatted page name. There is also an excluded word list when October is prepopulating those slugs so its not as simple as splitting on the '-'. I'm not entirely sure how to tackle this one yet, its in the back of my mind however. What I am doing is setting a generic slug like "Post".

Daniel81
Daniel81

Ah right, I wasn't aware of an excluded word list, I thought it would just be a case of splitting on the "-" - nothings ever simple eh?! ;) I suppose you could split on the "-" for now and remove any excluded words that appear, as the final crumb only really serves as a visual aid in the crumb trail, it's not functional (disabled), but that's up to you.

Yeah, you'd have the option of adding a generic slug like "Post", but think I'll just hide the page from the breadcrumbs for now, so it just shows the parent trail, until a solution is found.

Thanks

Last updated

jared.meyering
jared.meyering

So I threw together a fix for this that I am using on my site.

Multiple plugins can control the page title on pages which have ":slug" type routing so its going to be impossible to dive into each one and find a particular value that you want set as a title.

In light of this I added a field to the breadcrumb settings called "Crumb Title From Id (Optional)" If you put a unique id on the element that you want to be the title on your page (Your blog post title for example) This setting will find that id and inject the value from the DOM into the current breadcrumb. Hope this solves your issue!

Example:

DOM:
<h3 id="crumb-title">The Current Blog Post Title</h3>
Breadcrumbs:
Crumb Title From Id (Optional): 'crumb-title'

Will inject "The Current Blog Post Title" into the active breadcrumb section.

jared.meyering
jared.meyering

This is in the 1.0.3 release.

Daniel81
Daniel81

Works great :)

sercanvirlan
sercanvirlan

Hello Jared,

The plugin uses page title by default. I think it must use this.page.title variable by default. So we can use the page title dynamically with code section. This is better solution for SEO.

Last updated

jared.meyering
jared.meyering

Forgive me sercanvirlan for being a little confused.

Are you suggesting using the custom title (the "Crumb Title" field) by default as opposed to page title?

Daniel81
Daniel81

Hi, just a small fix to the bit of JS that pulls the crumb title, just use:

if (bcTitle)
            bcActive.innerHTML = bcTitle.innerHTML;

because if there is no element ID supplied or found, it flags an error in the console:

Uncaught TypeError: Cannot read property 'innerHTML' of null 

Last updated

jared.meyering
jared.meyering

Thanks so much Daniel! This has been pulled into the plugin. Update and it should be there.

Antonija
Antonija

What about that title when using Blog plugin? How should I make it work?

Last updated

1-11 of 11