Commons Gets Collapsible Navigation

Translate this post

Image (1) CollapsibleNavigation.png for post 3817
Collapsible navigation for Vector's side bar

Wikimedia Commons now has a new feature, collapsible navigation for the sidebar of the Vector skin. Now you will see an arrow icon next to the title of each section. Each section title can be clicked to hide and show the links within the section. We refer to this hiding and showing action as expanding and collapsing.
The motivation for this feature came from observing users being distracted by and lost within the sidebar while trying to find various links. This solution helps to tuck away less frequently accessed items, without making them entirely inaccessible or fatiguing to access frequently for users who want do make use of them.
Part of our research also included tracking the frequency of clicks on sidebar links to discover which items were used the most. The results of our click-tracking experiment guided our choice to make the first navigation section always visible, the second section initially visible but collapsible, and all other sections after that initially collapsed but expandable. As you expand and collapse each section, your preference is saved on your computer so that it’s remembered between pages and sessions.
Trevor Parscal, Lead Features Engineer

Archive notice: This is an archived post from blog.wikimedia.org, which operated under different editorial and content guidelines than Diff.

Can you help us translate this article?

In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?

8 Comments
Inline Feedbacks
View all comments

How is this implemented? Some commons specific js, or is there magic syntax in [[mediawiki:Sidebar]] to trigger this?

bawolff :
How is this implemented? Some commons specific js, or is there magic syntax in [[mediawiki:Sidebar]] to trigger this?

This is implemented as a JavaScript extension to Vector. It requires no special sidebar markup.

Nice feature!
Is that Vector-specific javascript code or not, i.e. are there any chances to get it ported to monobook?

Church of emacs :
Nice feature!
Is that Vector-specific javascript code or not, i.e. are there any chances to get it ported to monobook?

It is currently Vector-specific yes, as it was specifically designed as an addition to Vector. Porting it to Monobook is probably a bit tricky because Monobook doesn’t group sidebar portlets nicely, while Vector does.

Haven’t found a better place to mention this yet, but there’s a rather annoying bug: the tabindex properties on the headers of the nav headers interfere with the natural tab index of the rest of the page.
So, for example, if I go to login to Commons, I enter my username, and pressing tab to go to the password field, I *do not* find the cursor moving into the password field (the expected behaviour). It also seems to cause some odd highlighting of the header (in Safari), but that’s merely annoying, not an outright bug…

Nihiltres : Haven’t found a better place to mention this yet, but there’s a rather annoying bug: the tabindex properties on the headers of the nav headers interfere with the natural tab index of the rest of the page. So, for example, if I go to login to Commons, I enter my username, and pressing tab to go to the password field, I *do not* find the cursor moving into the password field (the expected behaviour). It also seems to cause some odd highlighting of the header (in Safari), but that’s merely annoying, not an outright bug… This has been… Read more »

How is this implemented?
Tried differend Extensions – no one worked for MediaWiki 1.24.1. Any Ideas ??
Tried:
Extension:CustomSidebar
Extension:Vector

Dirk: the Vector extension is the one you want. You do need to set “collapsiblenav” config explicitly though.
Instructions here:
https://www.mediawiki.org/wiki/Extension:Vector