Closed geneowak closed 4 months ago
@geneowak Correct, you have to use the ui-nav-menu
element from AppBridge by Shopify.
Here is the example that we're using in our project:
// Install navigation side bar
const setNavigation = (navigationItems) => {
// only run first time
if (navMenu) {
return;
}
setupClientSideRouting();
navMenu = document.createElement('ui-nav-menu');
if (navMenu) {
navigationItems.forEach(item => {
const anchor = document.createElement('a');
anchor.href = item.destination;
anchor.setAttribute('rel', item.rel);
anchor.textContent = item.label;
anchor.addEventListener('click', e => {
e.preventDefault();
});
navMenu?.appendChild(anchor);
});
document.head.append(navMenu);
}
};
It's a bit roughly and just a part of our scripts so you have to modify as your need.
@juzser thanks for the quick response. I've tried out what you suggested but the menu is not showing up in the app. When I inspect the elements, I see the ui-nav-menu
in the head but it still is not showing up in the app menu.
@juzser it works when I add
<meta name="shopify-api-key" content="%VITE_SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" /></script>
to the header, is that necessary or is there a way that Polaris vue can take care of that?
I think you're mis-understanding the purpose or usability of AppBridge and Polaris.
The AppBridge is must-have for embedded apps and will not be included in Polaris (even in the Shopify React version)
Ah! Sorry for the confusion, it's my first time building an embedded app with a UI so am not familiar with how it is supposed to work. I thought adding Polaris Vue was all I needed to do and that it would take care of everything else.
Going to close this since I have gotten a working solution.
Many thanks @juzser 🙏🏾
Scenario
Add app navigation menus within the app and not from the app dashboard. Looking for a component like Nav-Menu
Question
I haven't been able to find the Nav-Menu component mentioned above but according to the Shopify docs there is a web API for the ui-nav-menu and I'm wondering if there is a way of using that with the vue app using your package because I have not been able to find a way so far.
How do you create menus within your own @ownego Shopify apps