Suggestion: add intermediate breadcrumbs that are not part of the slug (e.g. CSS Modules)

Documentation pages for CSS properties, such as grid-template-rows, have a surprisingly shallow list of breadcrumbs: References > CSS > the-property-name

Unlike other Web frontend APIs (e.g. HTMLImageElement), CSS properties don’t have a toplevel “related pages” list in the left sidebar.

Together, this makes it challenging to navigate from one CSS property to other, closely-related properties. Lists of related properties are available, but they’re not directly linked from anywhere on the individual properties’ pages, as far as I can tell.

Possible solutions:

• For CSS properties, add a breadcrumb between CSS and the-property-name linking directly to the property’s CSS module page, ideally linking to the page’s #reference fragment

• Consider adding similar breadcrumbs to the documentation pages for Web frontend APIs like HTMLImageElement

• In the left sidebar of CSS property pages, add a prominent Related Pages section

• In the left sidebar of pages like HTMLImageElement, consider providing a collapsible <details> element which encompasses all of the Constructor, Properties, Methods and Inheritance sections, so that the Related Pages section can be visualised in a single click

[Rumyra]

Thanks so much for raising @fleabitdev and for the offer to help @scottdotjs but I would advise holding off on such a PR.

The breadcrumbs are a direct result of how files are structured within mdn/content and we’re looking at a long term plan to improve this structure and/or the frontmatter to better reflect organisation of all the areas. This is most prominently noticed in the CSS and Web API areas of the site.

Platform improvements are planned to help make this work easier within content, so it’s a long term plan for us 👍

[scottdotjs]

@Rumyra Brilliant, thank you. I’ll look forward to seeing the results!