ZEVA 2- Implement breadcrumbs for item detail pages
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 6
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 32
Description
**Describe the task**
Implement breadcrumbs on item detail pages to improve navigation and reduce visual clutter caused by multiple navigation layers.
Breadcrumbs should represent the user’s navigation path and allow them to return to the previous level(s) in the system.
This pattern applies only to inner/detail pages after a user opens a specific item.
It does not replace the existing top-level module navigation tabs.
For example, module-level navigation such AS Model Year Reports , Compliance Ratios, Compliance Calculator and other existing top-level tabs should remain as-is.
Breadcrumbs should appear only once the user navigates into a specific record/item page.
Tabs shown within the item page should remain specific to the current item only (e.g. item details, Audit History, etc.), while higher-level navigation should be handled through breadcrumbs.
Example:
For a ZEV Model page, breadcrumbs may appear as:
ZEV Models > Model ID
or Compliance Reporting >Legacy Supplementary reports > report id
ZEV Models links back to the main models list page
Model ID represents the current page and is not clickable
**Purpose**
Improve navigation clarity and reduce screen complexity
**Acceptance Criteria**
- [x] Item detail pages display breadcrumbs above the page tabs/content.
- [x] Existing top-level module navigation tabs remain unchanged. Breadcrumbs do not replace module-level tabs.
- [x] Breadcrumbs reflect the current navigation path.
- [x] Previous breadcrumb levels are clickable.
- [x] The current page/item is shown as the final breadcrumb and is not clickable.
- [x] Tabs within the page remain specific to the selected item only.
- [x] The pattern is reusable across item detail pages in the system.
- [x] Breadcrumbs visually follow the following design requirements: Typography: 16 Medium. Colors: previous levels use Text Link/ current level uses Text Primary/ Separator icon: Chevron/ Chevron direction: right/ Chevron size: 16px
- [x] Breadcrumbs should support multiple levels where applicable. (Example: Compliance Reporting - Legacy Supplementary reports - report id
**Additional context**
This pattern should be used to clarify navigation hierarchy across the system and avoid overloading pages that already contain internal tabs
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.