Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better markup for sidebar menu items #1170

Closed
trusktr opened this issue May 11, 2020 · 1 comment · Fixed by #2469
Closed

Better markup for sidebar menu items #1170

trusktr opened this issue May 11, 2020 · 1 comment · Fixed by #2469
Assignees
Milestone

Comments

@trusktr
Copy link
Member

trusktr commented May 11, 2020

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:

sidebar

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 jhildenbiddle added this to the 5.x milestone Jun 16, 2024
@jhildenbiddle jhildenbiddle self-assigned this Jun 16, 2024
@jhildenbiddle jhildenbiddle linked a pull request Jul 19, 2024 that will close this issue
6 tasks
@jhildenbiddle
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants