Hide embedded app navigation bar

Solved

Hide embedded app navigation bar

sleyhane
Shopify Partner
21 3 9

Is there any way to dynamically hide the navigation bar for an embedded app?

Our app has some menu items defined, but I'd like to hide the navigation bar until the app is connected to an external account.

I can probably hack this with some CSS and an element with a class hook, but I'd like a better approach. The navigation bar for my app currently has a class of '_3DHTi' (defined by Shopify), so I don't want to rely on this in case it changes in future releases.

I saw a reference in an earlier community message about App Bridge potentially adding support for dynamic navigation bar menu items. Is there any update on this?

Thanks!

Accepted Solution (1)

sleyhane
Shopify Partner
21 3 9

This is an accepted solution.

I resorted to using the Polaris 'Tabs' component for our conditional app navigation -- despite the best practices saying that Tabs "not be used for primary navigation". But the embedded app's navigation bar seems much less flexible. I don't see a clean way to optionally show a menu item, change its link, or translate its name.

Please let me know if I'm missing something. Thanks.

 

View solution in original post

Reply 1 (1)

sleyhane
Shopify Partner
21 3 9

This is an accepted solution.

I resorted to using the Polaris 'Tabs' component for our conditional app navigation -- despite the best practices saying that Tabs "not be used for primary navigation". But the embedded app's navigation bar seems much less flexible. I don't see a clean way to optionally show a menu item, change its link, or translate its name.

Please let me know if I'm missing something. Thanks.