Here, I will make my argument in support of the left-aligned hamburger menu convention, combined with a reworking of Discourse’s default navigation of index pages.
In the context of a topic the hamburger serves the exact same purpose as it did before: Jump anywhere you’d like. It’s just way more familiar this way, as opposed to designing a separate menu serving up the same options.
The miscellaneous page links formerly kept in the hamburger menu has been moved to an even more subtle drop-down menu adjacent to the About link. (Though I think all of these pages should be discoverable via the About page itself as well, like some of those links already are.)
This means more code re-use since there’s no longer any special treatment required to make the category selection inside the old hamburger display in a smart way. The one-and-only Category drop-down should be made to scale well for forums big and small. Developers or designers should not have to worry about more than one category selector.
If some forum puts Tags or Badges or what-have-you to special use, they should have an official way of adding proper, prominent navigational items for these, similar to how Meta has special shortcuts for Bugs and Features.
I removed views to make room for the sticky sidebar.
I think links like “Admin” and “Flags” ought to be moved to the Profile menu, which will hopefully consume the notifications menu.
Once again, Flarum is an obvious inspiration here. That being said, I don’t like the way they turn the sidebar into a mini-topic-list once you’ve dug into a topic (Vanilla Forum also pulls a fast one on you in the sidebar sometimes). I want my left-hand sidebar to be my trusty lighthouse.
Essentially what we’re getting out of this is VBulletin’s old “quick jump menu”, but on UX steroids.
Right. I forgot to mention that the default-on is only intended for Desktop screens. On mobile, you’d always have to click the hamburger icon (or swipe from left to right) to reveal the menu, like most conventional Android apps:
Default-on would not work for me as my browser width is 1280px. In general I think this is too radical a change to take on at any point in the next 12 months.
I’ve done a fresh take on this. Forget about the more radical idea of having a toggle-able, fixed-by-default sidebar on desktop. I’m refocusing my proposal on two simple things:
Instead of the current hamburger’s overwhelming list of categories, we just re-use the standard category selector.
A new “Most popular” section, simply based on the most active categories on the site. This would also be an opening for other customisations, such as a curated “Recommended” or even a user-specific “My favorites”.
A new “Overview” section, that points to all those other pages.
Staff menu only visible to admins/moderators.
We’d end up with a much more straight forward space for site-owners to add their own custom menu items if they so wish.
I think it’s defensible to consider this on mobile, where I already feel the current hamburger menu should be almost fullscreen already… and on desktop if the browser is mega-wide we could do something on the sides with responsive design, etc.
Albeit the content of the side panel is different in my case, I’ve been trying to put together something similar.
So it’s a great coincidence this topic resurfaces two years later.
I had to think about how to make this as non-intrusive as possible, so I’d like to share my findings / what I ended up going with:
Please note that the short clips below contain music - because I took them for a different purpose, mute the videos before starting if that’s an issue.
If on small screen:
Panel covers content and is either full-screen width or 450px wide (whichever is smaller)
If on medium screen:
Panel covers content and is 450px wide
If on Large screen
Where there is enough space content for the content to be at least 800px wide + width of the panel to be 450px + a bit of breathing space, the content is pushed to the side
On extra large screens
Where there’s just way too much space, the content is not pushed, the side panel just comes out:
Any particular reason why this would be useful to you? We’ve not seen an overwhelming amount of interest for this proposal, so it’s not on the roadmap yet.
I came across this today only. It looks really cool. If it can be added as a theme component then it’s definitely worth a shot as it would sort the overlapping issue caused by the brand headers theme component.
It would be good to follow up on this because on mobile I feel the full height slide out hamburger / user notifications has compelling arguments in its favor.
Well…It is possible to implement it by reopen some widget and rewrite the hamburger menu in a theme with a script block of type “text/discourse-plugin”, but it may result in a large amount of unused code rendered to the user.
I agree that it is better to include the design into the core.
The simplest way is to reattach the menu button (#toggle-hamburger-menu) in the front of header. Nevertheless, a clear DOM structure of the menu itself should be better.
Actually, I’ve developed a theme for my own website for a few months.
Warning: The theme above contains a lot of non-internationalized, hard-coded string, and many dirty hacks / improper coding practices. (It supports only zh-cn)
I think it’s definitely worth considering something like this for core… one thing I’m not convinced on is having the hamburger icon on the top left. I don’t have a particularly large phone, and it’s impossible for me to reach that top left corner with one hand (the top right is pretty far away too, but it’s at least possible). Swiping helps, but we’ve also got the native browser gestures to compete with.
Also for what it’s worth, it’s starting to feel like more apps are beginning to move away from the top-left hamburger menu on mobile in favor of the bottom bar. (For example: Google’s new News app and the latest Netflix redesign have their primary navigation links in the bottom tab bar.) Bottom tab nav is a whole different conversation (and we’ve got a nice plugin already!).
One of the trickier things in the hamburger menu is how we handle categories. I think the flat list is starting to be a bit limiting for sites with long category lists, and it’s not particularly well suited for subcategories. Should we limit to popular categories (globally popular, then personally popular?) and rely on the full category page for the list of everything?
I have a long history of burying the lead and otherwise conflating multiple independent ideas in this topic
Because this:
Can by and large be kept completely separate from this:
There’s really 3 separate UX discussions to be had here:
Figuring out how to do a full-height, slide-out hamburger menu, which turned out to be more difficult than expected the last time we tried it: Full height, slide out hamburger menu
Is the hamburger menu due for a redesign? My personal opinion is a resounding YES.
Where should this menu be clickable and come sliding in from? That is highly subjective and ideally it’s the sort of thing that could be easily tweaked in a theme component anyway. The discussion comes down to what should be the default. Considering we already have a long-standing default in the top-right, I suggest we table this discussion indefinitely and in the meantime users like @misaka4e21 can enlighten us with theme experimentation.
Please note that the short clips below contain music - because I took them for a different purpose, mute the videos before starting if that’s an issue.
)
