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!
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>