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
- Example: MR !1234 in CE, the breadcrumbs should be
- For contextual pages within the navigation, the breadcrumb should only include the submenu title. For example
- Example:
Overview > Details
becomes justDetails
- Example:
- 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)
|
|
---|---|
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.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that text is created using text styles. When applicable used shared styles for colors. -
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)
Edited by Chris Peressini