Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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
Solved! Go to the solution
This is an accepted solution.
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.
Alex | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
This is an accepted solution.
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.
Alex | Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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.
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.