reactjsshopify-apppolaris

Polaris navigation onclick method


I'm using shopify polaris' Navigation component. The documentation to it is here:

https://polaris.shopify.com/components/structure/navigation

Let's say I setup a navigation component in my Navigation.js class like this:

<Navigation location="/">
      <Navigation.Section
        items={[
          {
            url: '/path/to/place',
            label: 'Summary',
            icon: 'home',
            selected:true
          },
          {
            url: '/path/to/place',
            label: 'Orders',
            icon: 'orders',
            badge: ''
          },
          {
            url: '/path/to/place',
            label: 'Products',
            icon: 'products',
          },
        ]}
      />
</Navigation>

In the link i sent above, it talks about onClick() method. How can I create a method that prints the label of the selected item. So, if they click on the first item, the callback function will get called and print "Summary". I just can't seem to put the pieces together. Any help would be great!


Solution

  • You should pass it with Navigation.Section items like this:

    <Navigation location="/">
          <Navigation.Section
            items={[
              {
                url: '/path/to/place',
                label: 'Summary',
                icon: 'home',
                selected:true,
                onClick: () => console.log('Summary')
              },
              {
                url: '/path/to/place',
                label: 'Orders',
                icon: 'orders',
                badge: '',
                onClick: () => console.log('Orders')
              },
              {
                url: '/path/to/place',
                label: 'Products',
                icon: 'products',
                onClick: () => console.log('Products')
              },
            ]}
          />
    </Navigation>