Building on the 6-up exercise I did recently, I spent some time building my first HTML prototype as a proof of concept for one possible way to update the WP core and WP.com navigation. Below I will share a preview of this prototype. I’ll share a link to it so you can poke around with it yourself. I’ll then do my best to grade this direction based on the constraints I laid out at the beginning of this exploration.
- My goal in doing these explorations is not to lobby for any specific direction. My goal is simply to explore and see if anything valuable can be learned in the process.
- I’m intentionally pushing to the edges with my explorations.
- This horizontal nav would be quite the departure from the existing top + left nav in WP core. There is zero chance that we’d be able to swap out the existing WP nav for this nav. This is obviously something we’d have to iterate towards over the course of multiple public iterations.
- My focus with this prototype was to get a few major things functional (plugin handling, responsive handling, roles, color schemes, translations, and how well it works with both Core and WP.com). I intentionally left out most polish.
- The code should mostly work, but it’s admittedly a bit hacky.
Here’s a quick GIF preview of what I’ve coded up. I’ll post a thorough video walkthrough below as well if you’re interested in the details:
Take it for a spin
Feel free to take this prototype for a test drive:
There are still be a few rough edges and things to figure out:
- When you click the back arrow from the plugin menu, it often triggers the fly out menu for the WP logo. This isn’t ideal. I suspect there is a way around this if we introduced a timeout.
- Some of the breadcrumb sections are not actually links. We could come up with actual pages for sections like “Publish”, but I’m not sure it’s worth it.
- The “+” next to Posts, Pages, etc… Is not super intuitive. Would could change this to read “Add new”, but that would probably feel excessive. There is likely a solution that would work somewhere in the middle of the two. Maybe just the word “Add”.
- Timing on the mega menu transitions isn’t perfect yet. I suspect we could fine tune this even more.
- The search UI could pop out like it does on GitHub and allow you to jump to any deep link.
Next, I plan on exploring another entirely different approach to overhauling the WP nav.
If you have thoughts, questions, feedback, criticism, or concerns I’d love to hear them in the comments below.