[Feature Request]: Allow React component for SideNavigation & TopNavigation Links

[cloudscape-design]

[Feature Request]: Allow React component for SideNavigation & TopNavigation Links

[rubencarvalho]

Hi!
Following up on this issue:
You can programatically navigate by using the onFollow property in the SideNavigation (which is fired when an anchor is clicked) and onItemClick in the TopNavigation component.

For example:

import { navigate } from "gatsby"

<SideNavigation
    onFollow={(event) => {
        event.preventDefault();
        navigate(event.href);
    }}
/>

This should still allow Gatsby to use the linking enhancement features that you mentioned (preloading, prefetching).

[rubencarvalho]

Hey,
thank you for reaching out and bringing this use case to our attention.

We currently don’t support using a custom component as a side navigation item. Allowing this does seem like a sensible addition to the side navigation component, however we don’t have any plans for making this change at the moment.

I will keep this issue open to collect any additional feedback or use cases.

Thanks!
RC

[just-boris]

Simply allowing value: <Link href="/page2"></Link> as the OP suggests does not work, because we need to apply additional styles for hover and active states.

Applying styles like .side-navigation a {...} is unsafe because we do not know what is going on inside react-router library. You may even use a different routing library after all. We cannot make any assumptions what is inside that <Link>

This leaves us with the current onFollow={event => { event.preventDefault(); navigate(event.href); }}. May look a little verbose, but it allows us to not worry about every new router version, because everything works same way as before.

If you want us to prioritise this feature request, it needs some solid reasons, not just aesthetic preferences

[sparkyfen]

I'd like to piggyback off of the this issue with my request for the TopNavigation having a component.

I'd like to be able to add a custom login widget that Telegram offers: https://core.telegram.org/widgets/login

This has been translated into React/Typescript but since the TopNavigation component doesn't support custom components, I'm unable to add it into the navigation or point to one of the Button elements to do this business logic done in the component.

[fortejas]

Would be nice to have an easy interface to make use of react router with cloudscape.

[rikkuness]

Not directly related to this but I have a use case where I'd like to be able to disable links in the SideNavigation.

Further to the above I'm using Next.JS and for navigation I use the following and it works well for me

onFollow={(event) => {
    event.preventDefault()
    push(event.detail.href)
}}