7 ways of designing an expandable mobile menu

You have chosen an expandable menu for your mobile experience, triggered by a menu button, as in this example:

But how do you design the expandable part of the menu? Let's look at some common ways of solving this issue.


Different approaches

Below 7 common ways of designing an expandable menu is shown:

Version 1 - "overlay top, three rows stacked"


Version 2 - "overlay top, three rows stacked 2"


Version 3 - "overlay top, two columns"


Version 4 - "overlay top, stacked items"


Version 5 - "overlay right"


Version 6 - "off canvas"


Version 7 - "mega menu"


Side by side

Let's compare the 7 versions by putting them next to each other:

Which one do you like best? Which one is most suitable for your needs?