Unable to implement ui-nav-menu

[rizu1]

We are using react app on front end with shopify app bridge 3.1 and we need to create the static navigation for our app and as per shopify announcement its no more possible directly in the app configuration > navigation but shopify gave this guide to implement: https://shopify.dev/docs/api/app-bridge-library/web-components/ui-nav-menu but we don't know where to implement it so it renders on the left side in the shopify admin area as this link suggests but we tried a couple ways to place this piece of code in index.html and App.js but it doesn't work.

Can anyone guide how this case be achieved or if anyone did it so we can learn.

Our react file code:

 return (
     <AppProvider i18n={en} linkComponent={AdapterLink}>
        <ui-nav-menu>
  <a href="/" rel="home">Home</a>
  <a href="/templates">Templates</a>
  <a href="/settings">Settings</a>
</ui-nav-menu>

 <BrowserRouter>
             <AppBridgeProvider>
                 <QueryProvider>
                    
                 </QueryProvider>  
             </AppBridgeProvider>
         </BrowserRouter>
             
     </AppProvider>
     
 );

I also tried in index.html directly as below in the body before root:

 <ui-nav-menu>
     <a href="/" rel="home">Home</a>
     <a href="/templates">Templates</a>
     <a href="/settings">Settings</a>
 </ui-nav-menu>

 <div id="root"></div>

None of ways it works. There is also reactcomponent but we couldn't try that due to it requires app bridge 4.x which we cannot upgrade as of now. 

Any idea or help on this would be highly appreciated.

[axeltta]

Hey did you manage to fix this?

[rizu1]

Not yet

[axeltta]

bru its been a week, im making a new app from scratch to see how the default works on new apps