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.
-
Remove GitLabfrom the start of the breadcrumbs [previously: https://gitlab.com/gitlab-org/gitlab-ce/issues/34957] -
Make breadcrumbs all on one line OR style the page title differently. [previously: https://gitlab.com/gitlab-org/gitlab-ce/issues/35121, https://gitlab.com/gitlab-org/gitlab-ce/issues/35528] -
One proposal is to move the page title on to the same line as the breadcrumbs, since it is a part of the breadcrumb:
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
GitLabfrom 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-widthto64pxand themax-widthto128px, 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
