Global navigation (global nav) is the left-most pane in the documentation. You can use the global nav to browse the content.
Research shows that people use Google to search for GitLab product documentation. When they land on a result, we want them to find topics nearby that are related to the content they’re reading. The global nav provides this information.
At the highest level, our global nav is workflow-based. Navigation needs to help users build a mental model of how to use GitLab. The levels under each of the higher workflow-based topics are the names of features. For example:
Use GitLab (workflow) > Build your application (workflow) > Get started (feature)> CI/CD (feature) > Pipelines (feature)
While some older sections of the nav are alphabetical, the nav should primarily be workflow-based.
Without a navigation entry:
Before you add an item to the left nav, choose the parts of speech you want to use.
The nav entry should match the page title. However, if the title is too long, when you shorten the phrase, use either:
Use a phrase that clearly indicates what the page is for. For example, Get started is not as helpful as Get started with runners.
Add a navigation entryThe global nav is stored in the gitlab-org/technical-writing/docs-gitlab-com
project, in the data/en-us/navigation.yaml
file. The documentation website at docs.gitlab.com
is built using Hugo and assembles documentation content from several projects (including charts
, gitlab
, gitlab-runner
, and omnibus-gitlab
).
Do not add items to the global nav without the consent of one of the technical writers.
To add a topic to the global navigation:
navigation.yaml
file, add the item.Documentation pages can be said to belong in the following groups:
With these groups in mind, the following are general rules for where new items should be added.
Making all documentation and navigation items adhere to these principles is being progressively rolled out.
What to addHaving decided where to add a navigation element, the next step is deciding what to add. The mechanics of what is required is documented below but, in principle:
Exclude these pages from the global nav:
user/application_security/dast/checks/
directory.The following pages should probably be in the global nav, but the technical writers do not actively work to add them:
/development
directory.doc/administration/troubleshooting
directory.Sometimes a feature page must be excluded from the global navigation. For example, pages for deprecated features might not be in the global nav, depending on how long ago the feature was deprecated. To make it clear these pages are excluded from the global navigation on purpose, add the following code to the page’s front matter:
All other pages should be in the global nav.
The technical writing team runs a report to determine which pages are not in the nav. This report skips pages with ignore_in_report: true
in the front matter. The team reviews this list each month.
In addition to feature documentation, each category in the Use GitLab section should contain:
This ensures a repeatable pattern that familiarizes users with how to navigate the documentation.
The structure for the Use GitLab section is:
The global nav is built from two files:
The data file feeds the layout with the links to the documentation. The layout organizes the data among the nav in containers properly styled.
Data fileThe data file describes the structure of the navigation for the applicable project. It is stored at https://gitlab.com/gitlab-org/technical-writing/docs-gitlab-com/-/blob/main/data/en-us/navigation.yaml.
Each entry comprises of three main components:
title
url
submenu
(optional)For example:
- title: Getting started
url: 'user/get_started/'
- title: Tutorials
url: 'tutorials/'
submenu:
- title: Find your way around GitLab
url: 'tutorials/gitlab_navigation/'
submenu:
- title: 'Tutorial: Use the left sidebar to navigate GitLab'
url: 'tutorials/left_sidebar/'
Each entry can stand alone or contain nested pages, under submenu
. New components are indented two spaces.
All nav links:
path/to/page/#anchor-link
.This must be followed so that we don’t have duplicated links nor two .active
links at the same time.
For all components, respect the indentation and the following syntax rules.
TitlesGitLab CI/CD
, there’s a /
present, therefore, it must be wrapped in quotes. As convention, wrap the titles in double quotes: title: "GitLab CI/CD"
.URLs must be relative. In addition:
/
(not .html
or .md
)./
.'url'
. To find the global nav link, from the full URL remove https://docs.gitlab.com/
.Examples of relative URLs:
Full URL Global nav URLhttps://docs.gitlab.com/api/avatar/
api/avatar/
https://docs.gitlab.com/charts/installation/deployment/
charts/installation/deployment/
https://docs.gitlab.com/install/
install/
https://docs.gitlab.com/omnibus/settings/database/
omnibus/settings/database/
https://docs.gitlab.com/operator/installation/
operator/installation/
https://docs.gitlab.com/runner/install/docker/
runner/install/docker/
Layout file (logic)
The navigation Vue.js component sidebar_menu.vue
is fed by the data file and builds the global nav.
The global nav contains links from all five upstream projects. The global nav URL has a different prefix depending on the documentation file you change.
CSS classesThe nav is styled in the general main.css
file. To change its styles, keep them grouped for better development among the team.
We run various checks on navigation.yaml
in check-navigation.sh
, which runs as a pipeline job when the YAML file is updated.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4