Full-width dropdown vs left sidebar on mobile

Question

I'm in a fairly early stage of creating a responsive Wordpress theme. I have a basic fixed header bar and I'm working on a left-hand navigation panel right now. I'm taking some inspiration from the KDE Kirigami HIG.

The fixed header bar is already responsive; the name of the company disappears and the company logo becomes centered on small screens. I have a hamburger menu on the left and the navigation panel will always be shown on larger devices unless someone clicks the hamburger menu button (in the future).

I had not yet started working on the breakpoints for the navbar on mobile when I tested it and discovered that it already looked like a menu on mobile:

For comparison, my original mockup of the mobile menu:

From a usability perspective, what are the pros and cons of having a menu drop down from the top vs slide from the left? A few that come to mind:

Pros of drop-down:

• Apparently easier to program
• Keeps main content visible while navigating

Cons of drop-down:

• Inconsistent with desktop design
• No possibility of a swipe-right-to-open thing (menu button is in top-left, bad for right-handed people without swiping)
• Not as distinguished from the main content of the page

Pros of left menu:

• Similar to Android Material Design and KDE Kirigami design
• Common mobile website design
• Conducive to swiping

Cons of left menu:

• Less efficient use of vertical space

Answer 1

Use left menu (side drawer)

I will explain the reasons below each of your observations

Pros of drop-down:

Apparently easier to program This has nothing to do with usability, this is an implementation issue. You'll know what resources you have in order to build this, but from an users perspective, this is a non-issue.

Keeps main content visible while navigating This might be true in your case, where you have only a few items. But generally speaking, if you have a fair amount of items, scenario will be the same or worse: left menu provides an affordance on what to do, but a menu covering the whole canvas may confuse some users that accidentally touched the menu button

Cons of drop-down:

Inconsistent with desktop design This is exactly the point: mobile is not the same as desktop, therefore you should provide an experience built for mobile, not force a desktop clone for sake of consistency. As we're at it, consistency can be achieved by the use of color, fonts, imagery and such. But if you have a hamburger menu, users will expect that element to act as expected, regardless of consistency (which isn't true). Both options will be equally "inconsistent", and that's the idea

No possibility of a swipe-right-to-open thing (menu button is in top-left, bad for right-handed people without swiping) This is a very good reason not to use this version, just as you said.

Not as distinguished from the main content of the page Exactly. This is related to what I mentioned above when you consider this as a pro

Pros of left menu:

Similar to Android Material Design and KDE Kirigami design This is a huge pro!

Common mobile website design Ditto!

Conducive to swiping I couldn't say it better!

Cons of left menu:

Less efficient use of vertical space Quite the opposite. The idea of off canvas or sidedrawer menus is to momentarily interrupt the flow in order to provide focus on a task that the user needs to perform (for example: choose a page to go). After that task has been performed, the menu disappears, providing cues about what happened and what have you done in order to get to a new location. Vertical space isn't affected at all since the element is LITERALLY off canvas

And these are just some of the reasons, based on your own observations. There are many more (for example, crossing your thumb all the way over the screen instead of swiping to dismiss a menu!).

However...

If you have only 4 items, and you know they won't be more than that, I suggest you make them visible at all time and forget about hidden menus, they're proven to affect UX in a bad way