Split global navigation by top-level menu item
Let's try splitting up the global navigation by section:
- Show the top-level sections (Tutorials, Subscribe, Install, Administer, Use GitLab, Develop, Contribute) in a new menu structure in the top navbar ("primary navigation")
- In the lefthand menu, only show menu items for the section you're currently in ("local" or "secondary" navigation)
Why
Infrastructure savings
-
Huge savings in storage size: The uncompressed public directory (full site build) goes from 2.26 GB to 507 MB. The large size of our build artifact has caused several issues for us this year.
-
Improved site performance: This solution improves site performance by loading a smaller menu. For visitors, an average HTML page shrinks from 80kb to 35kb.
Better usability
-
Clearer separation by audience: We have many similar-looking docs that target different types of visitors. For example, for feature flags, we have:
This solution helps users more easily view which area of the docs the page is in. (Right now, the nav is so large that the area of the docs is hidden.)
-
More digestable left navs: This solution makes it easier to browse within the section you're in -- less nesting of items, less scrolling, and related content is more clearly visible.
-
Improved search and SEO: Google considers menu links as page content, and sometimes we get irrelevant search results due to having the entire menu on every page (#1593). Limiting the menu to more relevant pages (pages in the same top-level section) from the current page would reduce occurrences of low relevancy results.
Related examples
Examples of organizations that use a left nav, a right nav, and a top nav:
There are other ways to separate content by audience, but GitLab has traditionally kept everything in one place, at one URL, and this solution maintains that, while making each of the individual areas more digestible.
We could separate the content even more, by not showing the top nav, and instead having a home page that takes people to one location at a time (a "hub-and-spoke" model). But I think this is a less drastic solution that helps address the audience issue, while letting people easily see what other content is available.
Research
- https://www.nngroup.com/articles/local-navigation/
- https://www.nngroup.com/articles/navigation-you-are-here/
- https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/
- https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/ch04.html
Draft MR: !3459 (closed)