Make the current page more visible in sidebar

[HonkingGoose]

Summary

It's difficult to see where you are in the sidebar. I want the current page on the sidebar to stand out more.

I recommend copy/pasting GitHub Docs's current sidebar styling, or at least getting inspired by that. 🙃

What's the problem?

Here's the current page in the sidebar styling on the official Material for MkDocs page:

And for good measure, the current Renovate docs styling:

The only thing that changes is that the current item on the sidebar gets a different color. There's no other state change, like text size, background or a symbol added. I have good vision, and even I don't really notice this color change.

The items on the sidebar that have been "scrolled past" get a muted grey text color, which is too subtle. Also, I don't like how that reduces the contrast rating from AAA to AA. So the old stuff becomes harder to see.

Good example

I love how GitHub Docs style their current sidebar:

Note how the background changes, and there's a nice colored bar to the left of the current item. I can see right away which item in the sidebar is active.

Comparison between MkDocs and GitHub

Current page sidebar property	MkDocs	GitHub
Text color	Current the same, muted grey for scrolled past	Stays the same
Background	Stays the same	Muted grey
Colored bar on the left	No	Yes, in accent color

Proposed fix

Copy/paste GitHub Docs's styling. 🙃 So:

• Drop the "muted grey text" for scrolled past items on the sidebar
• Use a colored bar to highlight the current item, this should probably use the accent color for the theme
• Give the current item a subtle grey background

Discussion

I look forward to hearing what the maintainers think!

[alexvoss]

FWIW I agree there is room for improvement here. It should be possible(?) to make the changes with customization but we should also look at improving the default, especially when it comes to accessibility - for people with low vision or color-blindness in this case.

[squidfunk]

We're planning to do a facelift later this year, if our funds and time available allows for that, and this will definitely be addressed as part of it. In the meantime, it's quite simple to adjust the style with some additional CSS.

[HonkingGoose]

Thank you for the quick response! ❤️

I'm happy that a sidebar facelift is planned. Looking forward to it! In the meantime, I'll try the CSS suggestions from others. 😄

[kamilkrzyskow]

Maybe not exactly what you're asking for, but this extra CSS should improve the readability similar to GitHub's docs:

.md-nav__link--active {
  background-color: var(--md-code-bg-color);
  border-radius: 0.2em;
  padding: 0.2em;
  outline: 0.1em solid;
}

/* Additional styling to fix glitches */

.md-sidebar__inner {
  padding-top: 0.1em;
}

.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  box-shadow: initial;
}

firefox_quwzTnDSaa.mp4

[couleurm]

Thanks! this is quite a cool hack, I tweaked it myself so it doesn't clip when it's a page that's at the top

margin-top: 0.1em !important;
padding-bottom: 0.3em;

though there might need to do some more css wizardzy for it to not get shadowed by the category name

[kamilkrzyskow]

Hmm, the first issue seems to be with the category index page. I would add padding to the sidebar itself, instead of your margin-top padding-bottom combination:

.md-sidebar__inner {
  padding-top: 0.1em;
}

Note that .md-sidebar__inner targets both the navigation on the left and toc on the right. You could add more specificity to only select the left, but I don't think it's required.

---

As for the second issue with the shadow I would override the style and "turn off" the shadow, it's connected to a media query, but the override works without it:

.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  box-shadow: initial;
}