Skip to content

Navigation - Add dropdowns to global links in top bar

Resources

FE @kushalpandya | UX @cperessini

In order to provide quicker access to projects we add a dropdown to the Projects link in the top bar. The dropdown will open on click, following the behavior of the + button and personal dropdowns in the top bar.

The dropdown will contain direct links to the different subsections of the Projects dashboard (Your Projects, Starred Projects and Explore projects).

On the right-hand side of the dropdown we will show a list of frequently accessed projects and a search box to navigate to other projects not present in the list.

The list of frequently accessed projects will be stored in localStorage. Every time the user visits a project, the Frontend evaluates how frequently that project is visited and adds it to the list if appropriate.

  • The dropdown will show up to 4 of the most frequently accessed projects
  • The list will have a static header, Frequently visited
  • If there are no frequent projects to show, an empty state message is shown: Projects you visit often will appear here
  • The height of the dropdown is always the same, which gives us available space to show search results
  • The avatar for each project should be shown next to its name
  • The project's parent group (or groups) is shown in a second line in the same style as the breadcrumbs
  • The dropdown should follow the style used in https://gitlab.com/gitlab-org/gitlab-ce/issues/28921#note_36011920
Empty state 1 project 2 projects 3 projects 4 projects
ce_35010__projects-dropdown--empty-state ce_35010__projects-dropdown--1-project ce_35010__projects-dropdown--2-project ce_35010__projects-dropdown--3-project ce_35010__projects-dropdown--4-project

Search box behavior:

  • When the dropdown is opened, the keyboard focus is automatically put on the search box
  • When the user starts typing, the frequent projects list is replaced with a blank background. We can add a spinner if we expect results won't be instant
  • The results are shown right below the search bar
  • If there are no matching results, an error string is shown: No projects matched your query
  • The current project switcher only searches projects you participate in. In this iteration we should the same behavior
Spinner Results No results
ce_35010__projects-dropdown--search-spinner ce_35010__projects-dropdown--search-results ce_35010__projects-dropdown--search-no-results

For mobile we make the dropdown full-width to account for long project names. We show the list of projects below the navigation links.

Searching on mobile inside the dropdown wouldn't be comfortable, so the search box is hidden.

Since vertical space will be more limited, the list should show only 3 projects instead of 4 on mobile.

Empty state Frequent projects
ce_35010__projects-dropdown--mobile-empty-state ce_35010__projects-dropdown--mobile-3-projects

For logged-out users we don't show the dropdown at all because:

  • If users are visiting GitLab without an account they probably are occasional visitors who won't have frequently visited projects. If they do, they probably always access those projects directly
  • The search box only searches projects you participate in, so it would always return empty results
  • The only link on the left side would be Explore projects, so we'd be requiring two clicks where you currently only need one
Edited by Chris Peressini