justin5267
commented
1 year ago The optimal way to display a table of contents (TOC) depends on the type of content being presented and the number of headings on the page, as well as the complexity of their hierarchy.
Svelte offers a modern approach that works well, especially for mobile usage. Docusaurus follows a similar logic with Svelte and even includes a thoughtful "back to top" button, making it a compelling option if you enjoy Svelte. Another popular tool is Materials for MkDocs, which showcases the TOC in a convenient collapsible sidebar.
Starlight provides a distinct feature by displaying the current section's heading at the top of the page, which is particularly useful for complex and lengthy documents. As for concerns about space occupation, it may be possible to reduce the header's height and adjust the background of the TOC header to make it less intrusive.
Thanks for reading!
What version of
starlightare you using?Haven't used yet
What version of
astroare you using?Haven't used yet
What package manager are you using?
npm
What operating system are you using?
macOS
What browser are you using?
Chrome
Describe the Bug
Starlight, as well as the Astro docs, have a large sticky navigation header that consumes a lot of vertical space. Occasionally, I prefer to zoom in when reading any documentation, and as a consequence I have a lot less room to read than I would otherwise if the navigation header wasn't fixed.
I'm interested in Starlight, though I would like to see this navigation treatment improved; either to keep it at the top of the page, or auto-hide as I scroll down. Check out how navigation is handled on the new Svelte website on desktop and mobile: https://svelte.dev/
Here's a reference with some more considerations: https://adamsilver.io/blog/the-problem-with-sticky-menus-that-appear-on-scroll-and-what-to-do-instead/
And a screenshot of my typical reading experience:
Thanks for reading!
Link to Minimal Reproducible Example
No response
Participation