Skip to content

Navigation breadcrumbs

Resources

FE @iamphill

Description

Original description and proposals We have a few issues related to the new navigation breadcrumbs:
  • Use of sub-menu items with in the breadcrumbs.

It looks like sometimes we are using Menu item / Sub-menu item in the breadcrumb and other times we are just using Sub-menu item.

Also the first menu item is always the first sub-menu item, if there is one. But we do not include the sub-menu item in the breadcrumb for these instances:

We should either always show the Menu item with the sub menu item, or just show the sub menu item, regardless of whether or not it is the first sub-menu item. Groups only uses the sub menu item currently and I think this looks much better.

With this design, the page you are on may not be clear. It is bolded, though, so there is distinction.

  • The other proposal is to make the title larger and more separated from the breadcrumb.

This proposal removes the page you are on from the breadcrumb which is unconventional because usually the breadcrumb includes where you are, not just the ancestry.

  • A third proposal is to connect the project/group title with the breadcrumb:

A couple questions about this design: Is the idea to make the second row fixed? Or would it scroll with content? One nice thing about having the project name in the sidebar is that you can always see it. So you always know where you are. If we make the second row scroll, this would be lost. If we make it fixed, it would take up more vertical space.

  • Remove GitLab from the start of the breadcrumbs (previously from #34957 (closed))
  • Make breadcrumbs all on one line (previously from #35121 (closed) and #35528 (closed))
  • Between breadcrumb items, use chevrons instead of slashes to improve movement between elements
  • Hide multiple subgroups inside of an ellipsis button (check design spec)
  • For each breadcrumb element, fix the min-width to 64px and the max-width to 128px, making sure the whole breadcrumbs contract and expand according to the available space
  • Please check other implementation notes in the design specs below
  • Consistent and intuitive breadcrumb labels (check the following collapsible panel):
Paths and corresponding breadcrumb labels

Project pages breadcrumbs (in the format of 'Group > Subgroups > Project > Page title'):

Path Title in breadcrumbs
Project > About > Details Details
Project > About > Activity Activity
Project > About > Cycle Analytics Cycle Analytics
Project > Repository > Files Repository
Project > Repository > Commits Commits
Project > Repository > Commit Commits > 384c444e
Project > Repository > Branches Branches
Project > Repository > Tags Tags
Project > Repository > Tag Tags > v8.1.0.rc2
Project > Repository > Contributors Contributors
Project > Repository > Graphs Graphs
Project > Repository > Compare Compare Branches
Project > Repository > Charts Contribution Charts
Project > Issues > List Issues
Project > Issues > Issue Issues > #1337 (closed)
Project > Issues > Boards Issue Boards (Board on CE)
Project > Issues > Labels Labels
Project > Issues > Milestones Milestones
Project > Issues > Milestone Milestones > Alpha Phase
Project > Merge Requests Merge Requests
Project > Merge Request Merge Requests > !1337 (merged)
Project > CI/CD > Pipelines Pipelines
Project > CI/CD > Pipeline Pipelines > #59 (closed)
Project > CI/CD > Jobs Jobs
Project > CI/CD > Job Jobs > #972 (closed)
Project > CI/CD > Schedules Schedules
Project > CI/CD > Environments Environments
Project > CI / CD > Environment Environments > production
Project > CI / CD > Charts CI/CD Charts
Project > Wiki Wiki
Project > Wiki > Wiki Pages Wiki > Wiki Pages
Project > Wiki > Wiki Path > Wiki Page Wiki > Wiki Page
Project > Snippets Snippets
Project > Snippets > Snippet Snippets > $50
Project > Members Members
Project > Settings > General General Settings
Project > Settings > Integrations Integrations Settings
Project > Settings > Repository Repository Settings
Project > Settings > CI/CD CI/CD Settings
Project > Settings > Pages Pages Settings

Group pages breadcrumbs (in the format of 'Group > Subgroups > Current group > Page title'):

Path Title in breadcrumbs
Group > Details Details
Group > Activity Activity
Group > Issues > List Issues
Group > Issues > Boards Issue Boards (Board on CE)
Group > Issues > Labels Labels
Group > Issues > Milestones Milestones
Group > Merge Requests Merge Requests
Group > Members Members
Group > Settings > General General Settings
Group > Settings > Integrations Integrations Settings
Group > Settings > CI/CD CI/CD Settings

User settings pages breadcrumbs (in the format of 'User Settings > Page title'):

Path Title in breadcrumbs
User Settings > Profile Edit Profile
User Settings > Account Account
User Settings > Applications Applications
User Settings > Chat Chat
User Settings > Access Tokens Access Tokens
User Settings > Emails Emails
User Settings > Password Edit Password
User Settings > Notifications Notifications
User Settings > SSH Keys SSH Keys
User Settings > GPG Keys GPG Keys
User Settings > Preferences Preferences
User Settings > Authentication Log Authentication Log

Admin area pages breadcrumbs (in the format of 'Admin Area > Page title'):

Path Title in breadcrumbs
Admin Area > Dashboard Dashboard
Admin Area > Projects Projects
Admin Area > Project Projects > GitLab.org / Gitlab Community Edition
Admin Area > Users Users
Admin Area > User Users > Administrator
Admin Area > Groups Groups
Admin Area > Group Groups > GitLab.org
Admin Area > Jobs Jobs
Admin Area > Runners Runners
Admin Area > Cohorts Cohorts
Admin Area > ConvDev Index ConvDev Index
Admin Area > System Info System Info
Admin Area > Background Jobs Background Jobs
Admin Area > Logs Logs
Admin Area > Health Check Health Check
Admin Area > Requests Profiles Request Profiles
Admin Area > Messages Messages
Admin Area > System Hooks System Hooks
Admin Area > System Hook > Edit System Hooks > Edit System Hook
Admin Area > Applications Applications
Admin Area > Application Applications > Slack
Admin Area > Abuse Reports Abuse Reports
Admin Area > Deploy Keys Deploy Keys
Admin Area > Service Templates Service Templates
Admin Area > Service Template Service Templates > Asana
Admin Area > Labels Labels
Admin Area > Label > Edit Labels > Edit Label
Admin Area > Appearance Appearance
Admin Area > Settings Settings

Dashboard pages breadcrumbs (in the format of 'Page title'):

Path Title in breadcrumbs
Projects Projects
Groups Groups
Activity Activity
Milestones Milestones
Snippets Snippets
Issues Issues
Merge Requests Merge Requests
Todos Todos

Proposal

Check all design variations and specs (for implementation notes, spacing, sizes, colors and text copying)

image

Edited by username-removed-626804