TopNavigation - href is undefined in identity onFollow event data

[piyushpranjal03]

TopNavigation component identity onFollow doesn't provide href information it is always undefined whereas same is working with utilities section.

            identity={{
                href: "/",
                logo: {
                    src: logo,
                    alt: "Galaxia+ Logo"
                },
                onFollow: (e) => {
                    e.preventDefault();
                    console.log(e.detail.href) // undefine
                    navigate('/');
                }
            }}
            utilities={[
                {
                    type: "button",
                    text: "About",
                    href: "/about",
                    // external: true,
                    onFollow: (e) => {
                        e.preventDefault();
                        console.log(e.detail.href) // /about
                        navigate('/');
                    }.
                },

Attaching a webstorm project. Filename TopNavbar.tsx

https://www.mediafire.com/file/aqsei90v781nba0/sample_cloudscape.zip/file

[piyushpranjal03]

I find out that Identity interface has onFollow?: CancelableEventHandler;

export interface Identity {
        title?: string;
        logo?: Logo;
        href: string;
        onFollow?: CancelableEventHandler;
    }

and other interface such as ButtonUtility has onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;

export interface ButtonUtility extends BaseUtility {
        type: 'button';
        variant?: 'primary-button' | 'link';
        onClick?: CancelableEventHandler;
        onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;
        href?: string;
        target?: string;
        rel?: string;
        external?: boolean;
        externalIconAriaLabel?: string;
    }

then how can I access the href provided in Identity using the same method:

function followLink(e: CustomEvent) {
    e.preventDefault();
    navigate(e.detail.href);
  }

[jperals]

Hi Piyush, thanks for reaching out. As you need to provide the href to the identity property, you should have access to this same value from your application logic.

Is this API design preventing you from implementing any functionality?

[piyushpranjal03]

Yes. It is not working as expected. I am not sure if my understanding is correct.
I am expecting that followLink function should work for both identity and utilities as both are CancelableEventHandler.

Could you please check and help

[piyushpranjal03]

https://www.mediafire.com/file/aqsei90v781nba0/sample_cloudscape.zip/file

This is the small vite project I created. This can help you to de-bug.

[piyushpranjal03]

Migrate to issues