Please see below. I currently have these accordion menus. Is this ideal for mobile or is there a better way?



enter image description here


An accordion on mobile can be confusing. If the length of the open accordion is longer then the viewport it is not clear if the accordion is open or closed since the accordion header is out of view. To close the accordion it would be necessary to scroll up again to achieve that.

As an alternative you could use an additional "navigation level". This means if the user taps on "GENERAL TIPS" the content currently shown in the expanded accordion will slide in from the right side. The back button would bring the user back to level 1. This would even give you the possibility to place the CTA to add a tip sticky on the bottom. This way the CTA does not scroll out of view.

Another example of additional "navigation level" is the Materials Design tab system. https://material.io/guidelines/components/tabs.html

  • For me, the best way is to remove the auto-close feature for the accordion when we ooen a new one. If the content is is too long, then the entire website jumps. Click-to-open and click-to-close ensure that there is no jump.
    – Babbzzz
    Oct 15 '18 at 5:31

You can try full-screen overlay. It will be easy. As pointed BrunoH if the content is long there would be too much of scroll. If you want you can add back button as well but not required since close button will lead to the same page.

enter image description here


I personally feel that the accordion is a reasonable UI choice for mobile, you might want to 'fix' the header and scroll the content. this will allow the user to easily collapse the expanded view.


Bruno has a good idea that is equivalent to the accordion menu (the slide out menu). But I would vote to keep the accordion style as long as you make some design tweaks that enhance the appearance of navigation.

For example, the accordion hierarchy may be easier to recognize if:

  • indent the submenu items
  • add subtle (inner) shadow to give appearance that a layer underneath opened
  • reduce the height of the opened port so the user can easily scroll outside of the opened port
  • do not include an accordion within an accordion (super confusing)
  • remove the right arrows on the submenu items as they seem to indicate that tapping will cause an additional menu to slide in from the right

Your mockup is a great start, Sam. But you don't need to hear that from me.

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.