How can I use onClick on a Button dropdown/Item?

[phstc]

I'm using the Top navigation component, and I would like to add onClick to call Auth.signOut() but it seems it only supports href.

How can I use onClick with a Button dropdown/Item? Besides Auth.signOut() I also want to use it for Next.js routes.

[timogasda]

Hello @phstc !

If you're using a menu-dropdown utility navigation, you can specify an onItemClick handler. Please refer to the API documentation of the top navigation component for more details: https://cloudscape.design/components/top-navigation/?tabId=api.

[hausdora]

Usage:

export default function TopNavigation() {
  const handleUtilityClick = async (e: CustomEvent) => {
    if (e.detail.id === 'logout') {
      console.log('logging out');
    }
  };

  // get name and username 
  const name = `${name}`
  const username = `${username}`

  const utilities = [
        {
          type: 'menu-dropdown',
          text: username,
          description: name,
          iconName: 'user-profile',
          onItemClick: handleUtilityClick,
          items: [
            { id: 'profile', text: 'Profile', href: '/profile' },
            {
              id: 'logout',
              text: 'Logout',
            },
          ],
        } as TopNavigationProps.Utility,
    ]
    return (
      <CloudscapeTopNavigation
        identity={{
          href: '/',
          logo: {
            src: '/logo/logo.svg',
          },
          title: 'Site Name',
        }}
        utilities={utilities}
        i18nStrings={{
          searchIconAriaLabel: 'Search',
          overflowMenuTriggerText: 'More',
          overflowMenuTitleText: 'All',
          overflowMenuBackIconAriaLabel: 'Back',
          overflowMenuDismissIconAriaLabel: 'Close menu',
        }}
      />);
};

Relevant section from the link:

menu-dropdown
description (string) - The description displayed inside the dropdown.

items (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the items property of the [button dropdown component](https://cloudscape.design/components/button-dropdown/), with the exception of the checkbox item type.

onItemClick (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.

onItemFollow (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an href set.

expandableGroups (boolean) - Controls expandability of the item groups.