Sidebars

[schalkneethling]

Sidebars on MDN Web Docs have long been a thorn in the side both from a visual and UX perspective and from an author and developer perspective. We can do some small things to improve the current situation, but it really needs a rethink.

We are currently embarking on a redesign of MDN Web Docs and as part of this, we would love to make sidebars better in as many areas as possible. We would love to get your thoughts, feedback, and suggestions.

Some existing files issues:

• Inconsistent placement of icons #1721
• Wrapping of text (prototype properties/methods etc) in the left navigation panel #2221

[schalkneethling]

A comment from a reader: #2221 (comment)

[wbamberg]

About wrapping of entries in the JS sidebar. Rather than:

String
    Methods
        String.prototype[@@iterator]()
        String.prototype.at()
        String.prototype.charAt()
...
        String.fromCharCode()
        String.fromCodePoint()
        String.prototype.includes()

...would it not be better to have:

String
    Static methods
        fromCharCode()
        fromCodePoint()
...
    Instance methods
        [@@iterator]()
        at()
        charAt()
        includes()

[its4zahoor]

Yeah! I had proposed a similar idea in the #2221 Comment. This is a common practice in many websites to show the method name (e.g includes) only in the title/sidebar and then use the full name (e.g String.prototype.includes) in the code examples.

Additionally, a sidebar with collapsible sections will be a great UX. Where sections could be Methods, Properties, Instance Methods, Iterators etc

[teoli2003]

This kind of sidebars could work on api/ too (even if we don't have the .prototype, the wrapping still happens sometimes).

Also we can list inherited methods/properties in a transparent way: the devs doesn't really care if it is inherited or not, in the list.

[schalkneethling]

Hey @wbamberg, @its4zahoor, and @teoli2003. I started a new discussion on the new mdn-community repo to further discuss this topic and reach an actionable conclusion. Your participation there will be appreciated.

[wbamberg]

@schalkneethling that discussion seems to be about icons, not sidebars?