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