mi6
[ic-design-system]: Improved docs for using ICDS navigation components with third party routing tools
Summary
This improvement ticket involves adding more examples to using ICDS navigation components alongside third party routing tools such as Next.js and Remix.
💬 Description
It is possible to slot third party navigation components into Top Navigation and Side Navigation, however, it is not clear how to use the 'active' state. There is an example within Top Navigation which displays the 'Get started' navigation with the active state but there is nothing within the code snippet to indicate how this is achieved.
It would be good to have code snippets using different javascript frameworks to demonstrate how this can be achieved.
💰 Use value
Improve the experience with using the main ICDS layout components alongside existing external routing tools.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given I am a developer building an application
When I integrate routing into my application with top navigation
Then when I click on navigation item, I would like to have the active state/styling appear
✏ Designs
N/A
🧾 Guidance
This task involves update the guidance
Additional info
Frameworks in mind are:
- Next.js
- Remix
- React Router (improved example)
This would be writing a page on Routing on how to support any libraries, not a code example per component/library
