Shopify Polaris Embedded App Primary Navigation

Solved
PhilippW
Excursionist
17 0 2

I am trying to create an embedded app using Polaris, and I am confused as to which React component I should use for primary Navigation. On the documentation site here are 5 options "Footer Help", "Link", "Navigation", "Pagination", "Tabs"

"Footer Help", "Link" and "Pagination" are obviously no primary Navigation. The "Navigation" page clearly states it should be the primary navigation for non-embedded apps ..."of any non-embedded application"... and the last option "Tabs" States under best practices that they should not be used as Primary Navigation ..."Not be used for primary navigation."...

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

 

What then should be used? 

 

Thanks in advance.

Accepted Solution (1)

Accepted Solutions
OTM
Shopify Expert
696 170 248

This is an accepted solution.

Hi, @PhilippW ,

This is Evita from On The Map.

 

You should use app navigation. 

1. Go to the Shopify partners dashboard and go to your app.

2. Click on Extensions and then click Manage embedded app button.

3. In navigation, section click configure - https://prnt.sc/ps4qgp

4. And then just add navigation, it will create navigation items after about 2 minutes.

5. Create new routes using the React app.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!

View solution in original post

Replies 4 (4)
OTM
Shopify Expert
696 170 248

This is an accepted solution.

Hi, @PhilippW ,

This is Evita from On The Map.

 

You should use app navigation. 

1. Go to the Shopify partners dashboard and go to your app.

2. Click on Extensions and then click Manage embedded app button.

3. In navigation, section click configure - https://prnt.sc/ps4qgp

4. And then just add navigation, it will create navigation items after about 2 minutes.

5. Create new routes using the React app.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
PhilippW
Excursionist
17 0 2
Lull
Excursionist
34 1 6

As far as I can see, this option is now deprecated - is that correct?
Which leaves the Navigation Polaris component, as I can see. Or is there an alternative - I prefer the option you describe which seems to be deprecated, as it has simple horizontal links.
But what is the best practice for closing and opening the navigation menu, if that is the only option? There is a onDismiss method on Navigation, but when will that be triggered?

Lull
Excursionist
34 1 6

Ah sorry - it's just moved to App setup -> Embedded app