Extension talk:JSBreadCrumbs

About this board

Remove or edit the "Last 5 Pages Viewed: " text

Pitchke (talkcontribs)

I would like to remove the text "Last x Pages Viewed: " automatically added at the beginning of the line, to improve GUI and simplicity. But this text seems not to be a DOM element on which we can act.

<span id="mwext-bc" class="noprint plainlinks jsbc-breadcrumbs">Last 5 Pages Viewed: <a> ... </a>  →  <a> ... </a></span>

Is there a solution to change this content ? Could you provide this as a new configuration flag or preference ?

Thanks a lot for this development and your support. Pierre.

Kghbln (talkcontribs)

Yes. Edit the "MediaWiki:Jsbreadcrumbs-intro-horizontal" page to change this text.

Pitchke (talkcontribs)

Great, indeed it works fine.

This is not explicitely documented for the extension but I now learned that various System Messages can be edited as shown in a wiki at Special:AllMessages page.

Just sharing here for other people interrested.

Thanks Karsten.

Reply to "Remove or edit the "Last 5 Pages Viewed: " text"

Doesn't work in Timeless skin

Crismagnabosco (talkcontribs)

Do you have any plans to update this extension to work with Timeless skin?

Cindy.cicalese (talkcontribs)

Could you please describe what the issue is in Timeless? It may be an issue of setting the appropriate CSS selector in your configuration to insert the breadcrumbs at. It would be good to know if that is the issue or if it is something else. Please also include version information.

Crismagnabosco (talkcontribs)

I'm updating the Mediawiki 1.31 and trying to use the Timeless skin. If I use the Vector skin, the JSBreadCrumbs works fine, but if I change to Timeless, the bread crumbs isn't showned in the page.

Cindy.cicalese (talkcontribs) (talkcontribs)

#firstHeading should be right. However, $wgJSBreadCrumbsCSSSelectorHorizontal doesn't work as advertised (and the whole logic of choosing the right selector programmatically seems to be somewhat flawed), so i ended up monkeypatching th whole thing to make it work:

# diff -ub resources/JSBreadCrumbs.js{.orig,}

--- resources/JSBreadCrumbs.js.orig     2021-04-14 12:07:31.194729971 +0200

+++ resources/JSBreadCrumbs.js  2021-04-14 12:09:01.268802485 +0200

@@ -103,7 +103,8 @@

                               } else if ( skin === 'foreground' ) {

                                       selector = '#mw-js-message';

                               } else {

-                                       selector = '#top';

+                                       // selector = '#top';

+                                       selector = '#firstHeading';


                               $( selector ).before( (talkcontribs)

For me

I Change File in /resources/JSBreadCrumbs.js

                         if ( horizontal ) {

                                if ( skin in cssSelector ) {

                                        selector = cssSelector[ skin ];

                                } else if ( skin === 'foreground' ) {

                                        selector = '#mw-js-message';

+                               } else if ( skin === 'timeless'){

+                                       selector = '#firstHeading';

                                } else {

                                        selector = '#top';


                                $( selector ).before(

Reply to "Doesn't work in Timeless skin"

vertical option is not formatted correctly with MW 1.37.1 and a quick fix

Amm1234 (talkcontribs)

for default vertical option it is not formatted correctly with the wiki css and this to fix it.

sed -i 's/body/vector-menu-content/' extensions/JSBreadCrumbs/resources/JSBreadCrumbs.js

sed -i 's/portal/mw-portlet mw-portlet-navigation vector-menu vector-menu-portal portal/' extensions/JSBreadCrumbs/resources/JSBreadCrumbs.js

Cindy.cicalese (talkcontribs)
Reply to "vertical option is not formatted correctly with MW 1.37.1 and a quick fix"

Example for $wgJSBreadCrumbsCSSSelectorHorizontal?

2 (talkcontribs)

Could you please provide an example of using $wgJSBreadCrumbsCSSSelectorHorizontal? (talkcontribs)

Answering my own question: to place the breadcrumbs in the footer for the Vector skin:

$wgJSBreadCrumbsCSSSelectorHorizontal['vector'] = '#footer-info';

Reply to "Example for $wgJSBreadCrumbsCSSSelectorHorizontal?"

git clone doesn't put extension into the needed directory name

Tenbergen (talkcontribs)

Cool extension, thank you for putting it together! I installed this via git clone from https://gerrit.wikimedia.org/g/mediawiki/extensions/JSBreadCrumbs because that's the easiest way to record it in my install script. The directory it pulls into is not named as it should be for the extension name. It's a small problem, I know how to rename it, but it took me a few minutes to figure out why it wasn't working. So, if it would be easy to change, that would be an improvement. Thanks!

Cindy.cicalese (talkcontribs)

Hi :-) What is the name of the directory that it pulls into? What is the exact git clone command you used? It works as expected for me.

Tenbergen (talkcontribs)

Hi Cindy! Sorry, I should have been more specific. I was cloning from Github. If I run

git clone https://github.com/wikimedia/mediawiki-extensions-JSBreadCrumbs

it clones into


I was cloning from Github because cloning from gerrit as per the instructions on the top of the page didn't work for me. There it says

git clone ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/JSBreadCrumbs

and if I try that I get an error

Cloning into 'JSBreadCrumbs'...
XXXXX@gerrit.wikimedia.org: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights and the repository exists.

I have looked back at how I get other extensions, and I can get them from gerrit, but I need to use

git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/JSBreadCrumbs

and if I use that it clones to the correct directory. Would it make sense to change the instructions at the top of the repo page so they use that?

Cindy.cicalese (talkcontribs)

If you want to clone into a directory with a different name from the last segment of the path, you just add another parameter with the name of the directory:

git clone https://github.com/wikimedia/mediawiki-extensions-JSBreadCrumbs JSBreadCrumbs

Unfortunately, those instructions on gerrit are not editable by me. Perhaps Template:ExtensionInstall on mediawiki.org could be expanded to add instructions for downloading from git.

Tenbergen (talkcontribs)

Good idea. Will have posted a comment at Template talk:ExtensionInstall#Installing / downloading. And since I was there I added another issue I recently encountered right below that one. Thanks for sending me in the right direction.

Too bad you can't edit the instructions on gerrit. If you don't know how (and whether at all) that would get changed it's probably unchangable. And who knows, maybe those who actually develop this need the syntax to be that way for other reasons...

Reply to "git clone doesn't put extension into the needed directory name"

Issue: Warning in Browser

2405:201:13:BAD5:0:0:C0A8:2 (talkcontribs)

I use Moxilla firefox v90.0 in my Ubuntu Desktop.

On loading the extension, I get the following error:

Cookie “mwext-jsbreadcrumbs” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute.

Please fix this.

Reply to "Issue: Warning in Browser"
2003:E7:5705:2600:A0B5:4117:F1A8:14F6 (talkcontribs)

I have several duplicated entries in the breadcrumb. My assumption for the reason is that the following two cases are not distinguished in the duplicate checking logic:



Reply to "Issue and Suggestion"
S0ring (talkcontribs)
Cindy.cicalese (talkcontribs)

JSBreadcrumbs uses the 'master' compatibility policy (see Compatibility#MediaWiki extensions). To get the most recent code, you need to select the master branch in Extension Distributor or use git to pull the tag you want.

Reply to "Latest version for MW 1.35"
Joroldr (talkcontribs)

The issue is a showstopper, because links are not usable.

My wiki uses URLs like this:


JSBreadCrumbs generates URLs like this:


Extension decides that index.php is the domain and I get:

This site can’t be reached

Check if there is a typo in index.php.


Sometimes there are pages that are generated correctly. I cannot find when the bug shows up. In 80% or 90% links are wrong.

Any ideas?

Cindy.cicalese (talkcontribs)
Reply to "Wrong URLs are generated"

Foreground skin left and right margin

Jonathan3 (talkcontribs)

Currently the "Last 5 Pages Viewed" box runs from the very left to the very right of the screen.

Foreground skin has headings, text, etc with a lot of white space on either side (on wide screens anyway).

Is there any way to get the breadcrumbs box to align with the Foreground skin?


Jonathan3 (talkcontribs)

I've put the following in Common.css. It's not perfect but it's good enough until someone lets me know a better answer! :-) @Kghbln, Cindy.cicalese: ?

.jsbc-breadcrumbs {
	max-width: 90em; /* size */
	margin: 0 auto; /*centre*/
Cindy.cicalese (talkcontribs)

That is a reasonable way to accomplish that.

Jonathan3 (talkcontribs)

Thanks for the quick response! I found a slightly better way (for me anyway). I added

<div id="put-jsbc-here" style="display:none;"></div>

to the bottom of my MediaWiki:SiteNotice, which is where I wanted the breadcrumbs, and which is within Foreground's div/grid structure.

Then I just needed to add


to LocalSettings.php

Cindy.cicalese (talkcontribs)

Even better!

Reply to "Foreground skin left and right margin"
Return to "JSBreadCrumbs" page.