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?
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.
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.
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).
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?>
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.