I have to architect a mobile web responsive interface that will be the same for iOS and Android clients.
The app has several areas which I would like to switch using bottom navigation/tabs with icons ans text design where I would display 5 items of which the last one would be More.... So this is the first level.
But then some of these areas have on-page components which I would like to users to switch between. For this I was thinking of top scrollable tabs with text only representation. Something similar to what Medium uses in their mobile app. I could also display these individual components as collapsible drawers but that means that users would need to scroll down to get to those and the whole thing will become rather messy because individual drawer components consist of filters, data and maybe even additional actions. And since users would be focusing on just a singl one at a time I was thinking it would be better to have tabbed navigation at the top to select a specific component and just display its features.
My app clearly has a two-level complex navigation where first level selects app area but second level switches context of the area. I wonder whether my idea of using bottom navigation in combination with top scrollable/Swipeable tab would work ok? I would like to simplify this or at least use some sort of controls that would work cross mobile platform without confusing users.
Is there any existing mobile app that uses this complex navigation, but maybe using different means of components?
Have I forgotten about anything else?