Navigation sidebar

Follow these guidelines when contributing additions or changes to the redesigned navigation sidebar.

These guidelines reflect the current state of the navigation sidebar. However, the sidebar is a work in progress, and so is this documentation.

To enable the new navigation sidebar, select your avatar, then turn on the New navigation toggle.

Before adding an item to the sidebar, ensure you review and follow the processes outlined in the handbook page for navigation.

Adding page-specific Vue content

Pages can render arbitrary content into the sidebar using the SidebarPortal component. Content passed to its default slot is rendered below that page’s navigation items in the sidebar.

Only one instance of this component on a given page is supported. This is to avoid ordering issues and cluttering the sidebar.

You can use arbitrary content. You should implement nav items by subclassing ::Sidebars::Panel. If you must use Vue to render nav items (for example, if you need to use Vue Router) you can make an exception. However, in the corresponding panel.rb file, you must add a comment that explains how the nav items are rendered.

Do not use the SidebarPortalTarget component. It is internal to the sidebar.

Snowplow Tracking

All clicks on the nav items should be automatically tracked in Snowplow, but may require additional input. We use data-tracking attributes on all the elements in the nav to send the data up to Snowplow. You can test that they’re working by setting up snowplow on your GDK.

Field	Data attribute	Notes	Example
Category	`data-tracking-category`	The page that the user was on when the item was clicked.	`groups:show`
Action	`data-tracking-action`	The action taken. In most cases this is `click_link` or `click_menu_item`	`click_link`
Label	`data-tracking-label`	A descriptor for what was clicked on. This is inferred by the ID of the item in most cases, but falls back to `item_without_id`. This is one to look out for.	`group_issue_list`
Property	`data-tracking-property`	This describes where in the nav the link was clicked. If it’s in the main nav panel, then it needs to describe which panel.	`nav_panel_group`

Docs

Edit this page to fix an error or add an improvement in a merge request.

Create an issue to suggest an improvement to this page.

Product

Create an issue if there's something you don't like about this feature.

Propose functionality by submitting a feature request.

Feature availability and product trials

View pricing to see all GitLab tiers and features, or to upgrade.

Try GitLab for free with access to all features for 30 days.

Get help

If you didn't find what you were looking for, search the docs.

If you want help with something specific and could use community support, post on the GitLab forum.

For problems setting up or using this feature (depending on your GitLab subscription).

Request support