Feature Description / Summary

Currently, in the dashboard breadcrumb navigation, the active page is not highlighted, but the previous page is, which is incorrect.
The goal is to revamp the breadcrumb component so that the active page is highlighted using the correct typography and color, and previous pages are shown in a lighter style — matching the new design (see reference screenshots attached).

Context

Breadcrumbs play an important role in navigation by helping users understand their current location in the dashboard hierarchy.
Correctly highlighting the active page improves UX, visual hierarchy, and accessibility.
This change will bring the UI in line with the design system guidelines and make the navigation experience more consistent across the dashboard.

Starter Tasks

1. Open /src/utils/BreadCrumbNavigation.res and locate the main breadcrumb rendering logic.
2. Apply the new design:
   • Active page: typography: ${body.md.semibold}, color: nd_gray/700
   • Previous pages: color: nd_gray/400
3. Use Tailwind classes defined in /tailwind.config.js for colors.
4. Open the Typography module for using typography — you can search for ${body.md.semibold} in the codebase using cmd+shift+F to see how to use typography.
5. Ensure the change is applied globally across all places where breadcrumbs are used.
6. Don't remove arrow functionality. We should have a choice between using a "/" or ">" as a divider.

Implementation Hints

• Update the main breadcrumb component, not individual pages, so the change propagates everywhere.
• Tailwind example:

  <span class="text-nd_gray-700 font-semibold">Active Page</span>
  <span class="text-nd_gray-400">Previous Page</span>

Acceptance criteria

• Active breadcrumb page uses body.md.semibold typography
• Previous breadcrumb pages use nd_gray/400
• Verified across multiple routes (Connectors, Payment Processors, etc.)
• Code formatted using npx prettier --write .
• All linting checks pass

Resources

Design References

Old Design

New Design (To Be Implemented)

Relevant Files

• Tailwind Config: /tailwind.config.js
• Breadcrumb Component: /src/utils/BreadCrumbNavigation.res

Helpful Docs

• ReScript Official Documentation
• Tailwind CSS Documentation

Have you spent some time checking if this feature request has been raised before?

• I checked and didn't find a similar issue

Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Mentor Contact

• Tag @kanikabansal-juspay [Kanika Bansal] in the comments if you have any doubts/queries

Submission Process:

• Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
• Once assigned, submit a pull request (PR).
• Maintainers will review and provide feedback, if any.
• Maintainers can unassign issues due to inactivity, read more here.

Refer here for Terms and conditions for the contest.