Too many breadcrumbs patterns coexist in the current project’s space.
By definition a breadcrumb is a pattern that ease navigation. In the context of the "Measure page" & "Code page", the breadcrumb allows users to explore/navigate the project folders and files. On the issue page its goal is different as its first purpose is to indicate the location of issues. For this reason 2 different breadcrumb designs are necessary.
Icons are attached if needed.
- In this context, the bread crumb is not clickable.
- When the name of a project is too long and leaves no space for the breadcrumb, it should be truncated. The path is the most important information for users and should always be visible without requiring an additional action.
- When the path is too long the first 2 folders and last 2 folders + file name should be visible first. To make this possible, the middle part of the path will be hidden under the "..." (Hover state color: #8A8A8A)
Measure page and Code page
- In the context of those 2 pages the breadcrumb serves 2 purposes. Indicate the location of a folder/file and ease navigation.
- Since the current design leaves a limited space for the breadcrumb we should make sure that the first and last folders are always visible. The space issue should be improved by
- On both pages the breadcrumb should use as much space as available.
- Change the color of the folder icon to #4B9FD6
- When folders are empty and grouped together we indicate to the users what's going on with a tooltip.