Design Pattern Library - Add breadcrumbs

Add breadcrumbs to brand.ai

Example(s)

Usage

Breadcrumbs should appear on every page of the application, except for the register and profile screens. Breadcrumbs allow users to easily determine where they are in the application and navigate up levels.

• For pages that present the details for an individual item (issue, merge request, snippet, pipeline, job, milestone, commit, tag, environment, cluster, pipeline schedule), the last element of the breadcrumbs should include the ID for said element.
  • Example: MR !1234 in CE, the breadcrumbs should be GitLab.org > GitLab Community Edition > Merge Requests > !1234
• For contextual pages within the navigation, the breadcrumb should only include the submenu title. For example
  • Example: Overview > Details becomes just Details
• Breadcrumbs should use the following rules in order to truncate items:
  • Use an ellipsis button to hide groups when there are 3+ groups in the path
  • Use an ellipsis button to hide all Wiki page breadcrumb items except the current page
  • The top-level group and the group closest to the project are never collapsed
  • All breadcrumb items except the last one are truncated to 128px if there isn't enough horizontal space to fit them on one line
• Certain pages have special breadcrumb paths to make the breadcrumb labels intuitive. These are refined as the follow:

Path	Title in breadcrumbs
Group > Issues > List	Group > Issues
Group > Issues > Boards	Group > Issue Boards
Group > Settings > General	Group > General Settings
Group > Settings > Integrations	Group > Integrations Settings
Group > Settings > CI / CD	Group > CI / CD Settings
Group > Project > Repository > Files	Group > Project > Repository
Group > Project > Repository > Compare	Group > Project > Compare Branches
Group > Project > Repository > Charts	Group > Project > Contribution Charts
Group > Project > Issues > List	Group > Project > Issues
Group > Project > Issues > Boards	Group > Project > Issue Boards (Board on CE)
Group > Project > CI / CD > Charts	Group > Project > CI/CD Charts
Group > Project > Settings > General	Group > Project > General Settings
Group > Project > Settings > Integrations	Group > Project > Integration Settings
Group > Project > Settings > Repository	Group > Project > Repository Settings
Group > Project > Settings > CI / CD	Group > Project > CI/CD Settings
User Settings > Profile	User settings > Edit Profile
User Settings > Password	User settings > Edit Password
Admin Area > System Hooks > Edit	Admin Area > System Hooks > Edit System Hook
Admin Area > Label > Edit	Admin Area > Labels > Edit Label

Dos and Dont's

(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)

✅ Do	🛑 Don’t
Ignore the instance name in the breadcrumb line	Include the instance name in the breadcrumb line
Keep breadcrumbs to one line by default	Break breadcrumbs up onto separate lines
Use ellipses to hide multiple groups when there are more than 3	Show more than 3 subgroups by default
Use chevrons between breadcrumb items	Use slashes or other characters to separate breadcrumb items

Related patterns

• Navigation

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

1. Ensure that you have broken things down into atoms, molecules, and organisms.
2. Check that you have not created a duplicate of an existing pattern.
3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
4. Make sure that text is created using text styles. When applicable used shared styles for colors.
5. QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)