I have a secondary nav which is related to the content on the current page as opposed to the primary nav which is a global menu. What is the best way to have two menus on mobile. Both have to be preferably at the top unless you have a strong reasoning otherwise.

Here is an idea/suggestion that I have, but feel free to suggest something completely different. The primary menu in the image below is sparse but it will have more links. Is it okay to have the secondary menu in a dropdown like the primary?

On desktop On Desktop

On mobile menu colapsed On mobile

on mobile menu opened On mobile open


I'd first question whether you need global navigation on mobile. I'm often asked to implement global navigation on projects because project leads have a belief that users want to 'hand out' in the application and be able to navigate from one point to any other point.

But in terms of actual usage, that's not now most people interact with most applications--at least on mobile. A hub-and-spoke model of navigation tends to work a lot better. If they want to navigate somewhere else, a tap on 'back' or 'home' to get to the main navigation is typically preferred for a couple of reasons:

  • navigating 'back' or 'up' on a mobile device tends to be rather trivial (tap or swipe)
  • it frees up valuable real-estate on the task-driven pages--which are typically the primary objective of the user.
  • on a lot of mobile apps, people want to come in, finish a task, and be done. They don't need to navigate freely from any one page to another.

Looking at your sample images, I'm not entirely clear what you consider to be the main vs. secondary navigation. They also appear to be wide pages (so not sure I understand the mobile-centric part).

That said, consider the many different ways to present navigation on a mobile device...swipe-to-show-nav-beneath, footer icons, swipe-to-open panels, etc.


Based on your comments, here's one suggestion. This removes the global menu for a 'hub and spoke' model (back) and the activate menu moved to the title bar:


download bmml source – Wireframes created with Balsamiq Mockups

  • What did u not understand – aWebDeveloper Jan 29 '15 at 6:35
  • @aWebDeveloper you tell me – DA01 Jan 29 '15 at 14:59
  • plz see the updated question and let me know if this makes it clear – aWebDeveloper Jan 30 '15 at 1:57
  • @aWebDeveloper based on my understanding of what you are asking, I stand behind my answer. In general, you don't want to menus on the top of your mobile app. – DA01 Jan 30 '15 at 2:00
  • i was asking about where to place sub menu – aWebDeveloper Jan 30 '15 at 4:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.