Which Polaris navigation elements to use in an embedded app?

Solved
Highlighted
Shopify Partner
30 0 1

Hi,

I am developing an embedded app with several information and configuration options - there are probably around 6 different areas, which I would like to have on 6 different pages. The merchant should easily be able to switch between the pages via e.g. a menu or similar.

When I look at the Polaris documentation for finding a menu-like component, I am not able to find one. There's Navigation, TopBar and Frame, but they all seem to be for non-embedded apps.

The component that best seems to fit my case is Tabs, but the best practices says "Represent the same kind of content", where I as mentioned have 6 different areas of content.

 

All in all it seems as if I am missing something - is there a better Polaris component for grouping the 6 types of content than tabs for an embedded app?

 

Thanks,

-Louise

0 Likes

Success.

Shopify Staff
Shopify Staff
1546 77 231

You could consider experimenting with TitleBar actions using App Bridge: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/titlebar#create-a-title-bar-with-se...

 

This will leverage the bar along the top of your embedded app, where you could place secondary buttons which follow a tab-like structure.

 

Cheers.

0 Likes
Shopify Partner
30 0 1

Hi Alex,

 

Thank you for your answer.

Ok, I will try that.

 

I am a quite confused though, regarding how Polaris and app bridge are supposed to work together.

Currently I use a Polaris Page component in my app, which gives me deprecation warnings, and suggests to use the TitleBar instead.
But how do I replace a Polaris Page component, with an App Bridge TitleBar - are the two libraries supposed to work together at all? How do I add app bridge "components" which seem to be plain JavaScript with Polaris React components?

The Polaris documentation covers Polaris, and the App Bridge documentation covers App Bridge, but I cannot find any documentation that explains how they work together?
(Note that I am usually a backend developer which might explain some of the confusion).

Thanks,
-Louise

 

Edit: I think I figured it out, App Bridge seems to be a React library as well, so replacing <Page> with <TitleBar>, although Page wraps the content and TitleBar does not, seems to work. (Although not as local development - anyway to do local development using app bridge?>
Thanks.

0 Likes
Shopify Partner
30 0 1

After having struggled a bit with combining App Bridge with Polaris, I see that Shopify in general recommend waiting with this until documentation is provided: https://community.shopify.com/c/Shopify-APIs-SDKs/App-Bridge-React/td-p/525726

So I've decided to wait until the react library is well documented.

0 Likes