Best practice for responsive vertical side menu

Question

If we have the classical vertical side menu (on the left) for desktop:

then, what is the best practice for displaying it responsively, especially when there's quite a few menu buttons?

---

To hint you at possible directions of thought, I have researched several options myself:

dismissed methods:

a) all buttons listed vertically:

- with numerous buttons this could take up the entire phone display area and by clicking a button you'd hardly notice that content has changed in the content pane;

b) all buttons wrapped:

- with too many buttons this might still take up too much of the phone display area; on top of that, if the button text is too long (as it is likely to be in some languages such as German) no wrapping could occur at all;

c) drop-down menu displaying all buttons on click

- this would seem as the ultimate solution at first, but it poses a great problem with the wording inside the drop-down - whatever you put, e.g. "Page menu", "Page tabs", "Click to see page contents", etc, there is a risk that users would ignore it and proceed to reading the content below (that is content corresponding to the default button, usually the first one), instead;

Making the menu fixed, would probably make it more visible for the user, but then having this menu fixed + most probably, having the header (above it) fixed, as well, would take up plenty of precious display space.

---

methods in consideration:

d) variation of "c)" - showing the first two buttons

e) variation of "b"

- in this case the buttons are displayed as simple text links; this would take up less space, but would still not be feasible with too many buttons with long names

f) drawer style left menu - when clicked it would slide the vertical menu on the right, over the content area

(idea taken from Responsive design for sidemenus)

Answer 1

To know what's the common approach to responsive menus, simply look at how it's usually done in mobile apps. I see two main strategies used in Android that are also the most common in mobile websites: the overflow menu - for all the actions that don't fit in the site header, and the sidebar menu - accessed via menu button or swiping, although swiping is not so practical in browsers.

Menus that slide from the top are not common or expected. Also, they are hard to reach with your thumb and awkward to use.

Answer 2

In your situation, without knowing the context, it is hard to say what exactly suited to your design. In common, use hamburger menu as your option (c). Below the menu, you could indicate which button (section/heading) you are in. Then the user knows which button has been clicked.