Restyle in-page navigation (right-side TOC) of docs.gitlab.com
Problem to solve
Visual styling of the in-page navigation (table of contents for a page) for our documentation site is visually inelegant.
- There is no negative space to the left of menu items, and long titles wrap awkwardly, with the left margin of the second line aligning with the caret instead of the text above.
- Links are preceded by a caret, which implies they are expandable (they're not).
- Questionable that anchor link to "Help and Feedback" is needed. Before clicking, I was uncertain where it would take me, assuming I would navigate to a separate support page.
- list-style-position displays as inside instead of outside, causing a strange wrapping effect with extra lines aligned with the bullet.
- Borders above and below the menu are visual clutter.
- “Overview” never gets highlighted in current state, and does not even function as a link so a user cannot hot link back to the start.
Intended users
Users of GitLab's docs site
Proposal
Simple visual restyling of in-page navigation that leverages design elements from the left sidebar nav at larger viewports.
On small viewports
- An accordion element expands and collapses the list or in-page links. It is expanded by default.
On large viewports
- A simple 4px wide path runs vertically alongside the list of in page links
- a 4px wide purple marker highlights the section that is in view, text becomes darker. The height of the marker matches the 22px line-height of the text.
- The right side remains white, there is no longer another gray section
View transition prototype → (Click to view transitions, loops after 4th click)
View mobile prototype → (Click accordion)
Before | After |
---|---|
What does success look like, and how can we measure that?
In-page navigation:
- Is easy to see
- Is not distracting from the rest of the page
- Is aligned appropriately, so that content wraps elegantly
- Follows brand/Pajamas standards
- Takes up an appropriate amount of real estate for the importance of the content
- Functions correctly so that the first item in the list can be active and clicked after scroll
Edited by Mike Lewis