Better markup for sidebar menu items

[trusktr]

Feature request

The markup in the sidebar has uls, lis, ps, and as, but without any semantic classes.

I'd like to be able to more easily style the menu levels.

For example, to achieve something like this:

What problem does this feature solve?

Currently, to do this, we have to write CSS like this:

ul > li > p {
 /* style first level */
}

ul > li > ul > li p {
 /* style second level */
}

/* etc */

What does the proposed API look like?

It may be cleaner to have classes, like

.menu-level1 {
 /* style first level */
}

.menu-level2 {
 /* style second level */
}

or similar. Thoughts?

[jhildenbiddle]

This issue has been addressed by PR #2469. The changes will be available when Docsify v5 is released.

• To-level headings can be targeted using .group and .group title classes
• Page links can be targeted using .page-link
• Nested page links can be targeted using .page-link + ul .page-link
• Anchor links can be targeted using .section-link

Styling based on nesting level only works if the content found at each level is consistent for the entire navigation tree. Targeting by type is preferable because it allows for styling to be applied properly in sidebar navs like this:

- Title

 - [Page 1](page1)
 - [Page 2](page2)

- [Page 3](page3)
- [Page 4](page4)

We could add both level and type classes (e.g. .level2 .page-link), but if this was necessary I don't think it is significantly cleaner or easier than something like li > li > .page-link.