Navigation breadcrumbs (#35269) · Issues · GitLab.org / GitLab FOSS

Navigation breadcrumbs

Resources

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 GitLab from 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 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)

### Resources

FE @iamphill

### Description

<details>
<summary>Original description and proposals</summary>
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 `GitLab` from 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:

- Remove `GitLab` from the start of the breadcrumbs (previously from #34957)
- Make breadcrumbs all on one line (previously from #35121 and #35528)
- Between breadcrumb items, use chevrons instead of slashes to [improve movement between elements](https://medium.com/madison-ave-collective/are-breadcrumbs-still-fresh-for-ux-6e72b0f96e9b)
- 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):

<details>
<summary>Paths and corresponding breadcrumb labels</summary>

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

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

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

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

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

<table>
  <tr>
    <th>Path</th>
    <th>Title in breadcrumbs</th>
  </tr>
  <tr>
    <td>User Settings > Profile</td>
    <td>Edit Profile</td>
  </tr>
  <tr>
    <td>User Settings > Account</td>
    <td>Account</td>
  </tr>
  <tr>
    <td>User Settings > Applications</td>
    <td>Applications</td>
  </tr>
  <tr>
    <td>User Settings > Chat</td>
    <td>Chat</td>
  </tr>
  <tr>
    <td>User Settings > Access Tokens</td>
    <td>Access Tokens</td>
  </tr>
  <tr>
    <td>User Settings > Emails</td>
    <td>Emails</td>
  </tr>
  <tr>
    <td>User Settings > Password</td>
    <td>Edit Password</td>
  </tr>
  <tr>
    <td>User Settings > Notifications</td>
    <td>Notifications</td>
  </tr>
  <tr>
    <td>User Settings > SSH Keys</td>
    <td>SSH Keys</td>
  </tr>
  <tr>
    <td>User Settings > GPG Keys</td>
    <td>GPG Keys</td>
  </tr>
  <tr>
    <td>User Settings > Preferences</td>
    <td>Preferences</td>
  </tr>
  <tr>
    <td>User Settings > Authentication Log</td>
    <td>Authentication Log</td>
  </tr>
</table>

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

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

<strong>Dashboard pages breadcrumbs</strong> (in the format of 'Page title'):

<table>
  <tr>
    <th>Path</th>
    <th>Title in breadcrumbs</th>
  </tr>
  <tr>
    <td>Projects</td>
    <td>Projects</td>
  </tr>
  <tr>
    <td>Groups</td>
    <td>Groups</td>
  </tr>
  <tr>
    <td>Activity</td>
    <td>Activity</td>
  </tr>
  <tr>
    <td>Milestones</td>
    <td>Milestones</td>
  </tr>
  <tr>
    <td>Snippets</td>
    <td>Snippets</td>
  </tr>
  <tr>
    <td>Issues</td>
    <td>Issues</td>
  </tr>
  <tr>
    <td>Merge Requests</td>
    <td>Merge Requests</td>
  </tr>
  <tr>
    <td>Todos</td>
    <td>Todos</td>
  </tr>
</table>

</details>

### Proposal

[Check all design variations and specs (for implementation notes, spacing, sizes, colors and text copying)](https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/ce%2335269-spec-previews)

![image](/uploads/01964517d392a0703ea5f884053ec790/image.png)

Edited Aug 14, 2017 by Pedro Moreira da Silva