Make section index page links more visible

[ekoleda-codaio]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

When using both the feature navigation.sections and navigation.indexes you can get into situations where the section header is itself a link to an index page. For example, on this page the headers "Migration" and "Contributing" appear like other section headings, but are in fact clickable links to index pages.

On hover the color of the text changes to indicate there is a link, but prior to that there is no visual indication to the user that more content lives there.

I'm not sure what the best UI treatment should be, but it would be great if the clickable section headers were visually distinguished from the non-clickable ones.

Use Cases

It would make it easier for users to discover content, or at least less likely to miss content that they are looking for.

Screenshots / Mockups

No response

[ekoleda-codaio]

I should note that I think the issue exists to a lesser degree when using navigation.indexes on its own. Visually there is no difference between a grouping node with a page and one without. That said, I think people are more likely to click on the unbolded non-section grouping nodes than they are on the bolded section headers.

[squidfunk]

Thanks for suggesting. So off the top of my head, the simplest thing we could probably do is make non-clickable sections greyish, while keeping clickable links black. Off course, it's trivial to apply further styling, but I think this might be a good default. It could look something like this:

[ekoleda-codaio]

Another approach, maybe a bit more involved, would be to have navigation.indexes not apply to section headers (or make that an option). I enabled navigation.indexes to help with deeper levels of nesting, but for section headers maybe it makes sense to ignore that and keep the index pages as separate entries in the nav.

[squidfunk]

I'm not sure I would agree – I think it's very useful that it applies to section headers. However, in the end it might be a matter of taste. As always, we try to strike a good balance here. If you have navigation.indexes enabled, and don't want to apply it to a section, you can always rename the file into something other than index.md.

[squidfunk]

fc352ee is an attempt to improve discernability of section index pages in navigation. If that's not to the taste of the author, it can be easily changed with a little CSS, overriding the selectors that apply the styles.

[ekoleda-codaio]

Thanks for the quick attention. I'll give it a try.

[squidfunk]

Released as part of 9.0.3.

[marc2k3]

I really dislike this change in 9.0.3 on the left. 9.0.2 on the right is far more pleasant.

I need some CSS please. 😬

[squidfunk]

Well, the points the author brought up are very relevant – it's unclear whether a section index is clickable or not. Do you have a better idea how we could distinguish both cases with alternate styling?

[marc2k3]

In my particular use case, none of the section headers are clickable and with that lack of contrast, it just looks like a huge list with no grouping at all. I have no idea what any solution could look like. It's very much "not my thing" (tm)

Since I'm utterly clueless, I'll pin my github action to 9.0.2.