Suggestion: add intermediate breadcrumbs that are not part of the slug (e.g. CSS Modules)
See original GitHub issueDocumentation 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
andthe-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 theConstructor
,Properties
,Methods
andInheritance
sections, so that theRelated Pages
section can be visualised in a single click
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (2 by maintainers)
Top GitHub Comments
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 👍
@Rumyra Brilliant, thank you. I’ll look forward to seeing the results!