Highlight Sidebar Entry for Subpages

[lorenzolewis]

What version of starlight are you using?

0.5.5

What is your idea?

Let's say you have the /foo route in a sidebar entry and a page that's at /foo/bar. I'd look to have the higher-level sidebar entry /foo highlighted when I'm on the /foo/bar page.

Why is this feature necessary?

To me it's easy to lose your place in a deeply-nested page without any visual indication of hierarchy. On other sites I've seen breadcrumbs that have helped with this but I think this could be a nice middle ground.

Some questions asked by @delucis on Discord (https://discord.com/channels/830184174198718474/1070481941863878697/1133134418576412682):

Does a higher-level segment always represent its sub paths?

I think so, but there might be some scenario where someone would want to opt-out of this behaviour. I can't think of one of these for me off the top of my head.

There’s quite a bit of complexity in implementation: presumably we should never highlight 2 links in the sidebar, so should only highlight /foo/ if /foo/bar/ is not also in the sidebar, for example.

I'd only highlight the lowest level. If you're at /foo/bar/and...

• a sidebar entry does NOT exist for /foo/bar/ then highlight /foo/ in the sidebar (if it exists)
• a sidebar entry DOES exist for /foo/bar/ then highlight /foo/bar/ in the sidebar

Basically start at the lowest level and walk up a single level at a time until you hit an entry if one exists.

Do you have examples of this feature in other projects?

The amazing Astro Docs website: https://docs.astro.build/en/install/manual/ and https://docs.astro.build/en/install/auto/

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Thanks for turning this discussion into an issue we can track! I think we’ll likely want this for the Astro Docs site, so one way or another we’d likely need to implement it. I’m not sure if everyone would want this behaviour, but I guess we can try it and if people ask to disable it, disable it later.

One question I’m still unsure about is what happens if / is in the sidebar. Following the logic described above, / is the parent of all routes, but I don’t think you’d expect it to be highlighted if some subroute doesn’t have an alternative parent in the sidebar?

[lorenzolewis]

If I understand you correctly you're talking about something like this for a sidebar structure...

.
├── quick-start/
│   ├── link to root
│   ├── entry 1
│   └── entry 2
└── guides/
    ├── guide 1
    └── guide 2

...and you're on a page that's not nested under guides or quick-start, but a different directory completely (maybe api/example. Would that then highlight the link to root entry?

I agree that I don't think I'd expect it to be highlighted. I'm trying to come up with a scenario where I would expect that and I got nothin'