# Proposing a left-aligned slide out hamburger menu
**URL:** https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287
**Category:** Feature
**Created:** [June 21, 2015, 8:07pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287 "2015-06-21T20:07:47Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [June 21, 2015, 8:07pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/1 "2015-06-21T20:07:47Z")
Continuing the discussion from [Full height, slide out hamburger menu](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/):
Here, I will make my argument in support of the [left-aligned hamburger menu convention](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/32), combined with a reworking of Discourse’s default navigation of index pages.
Upon entering [meta.discourse.org](http://meta.discourse.org), you would see this:
Drilling into a Category, you see this:
- Hamburger menu has absorbed the top sub-navigation.
- Hamburger menu is shown by default on index pages (on Desktop, not Mobile)
- Fills the same need as the [sticky navigation](https://meta.discourse.org/t/how-about-making-the-forum-index-menu-sticky/8275).
On topic pages it is hidden by default. Here’s what it would look like if clicked:
- 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.)
**Noteworthy:**
- 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](https://meta.discourse.org/t/adding-a-menu-item-to-the-hamburger-menu/24466) for these, similar to how Meta has special shortcuts for Bugs and Features.
- I [removed views](https://meta.discourse.org/t/should-views-column-be-removed/18941) 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](http://demo.flarum.org/) 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.
---
### Author:  [@AmiAthena](https://meta.discourse.org/u/AmiAthena)
#### Post date: [June 21, 2015, 9:03pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/2 "2015-06-21T21:03:35Z")
How would that work on mobile? There’s not much room for the navigation to go on the side like that.
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [June 21, 2015, 9:23pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/3 "2015-06-21T21:23:37Z")
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:
---
### Author:  [@AmiAthena](https://meta.discourse.org/u/AmiAthena)
#### Post date: [June 21, 2015, 9:27pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/4 "2015-06-21T21:27:09Z")
That swipe could be tricky on iOS, since left-to-right swipe is how to go back.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 22, 2015, 2:21am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/5 "2015-06-22T02:21:39Z")
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.
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [May 12, 2016, 2:23pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/6 "2016-05-12T14:23:09Z")
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:
1. Moving the hamburger menu to the left
2. Cleaning up the hamburger menu
This is what I’ve come up with:
- 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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [May 12, 2016, 9:37pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/7 "2016-05-12T21:37:20Z")
This is _such_ a radical design change, very unlikely to happen in 2016.
I also find the left aligned hamburger glyph hugely problematic; it takes precedence over the brand logo which is very odd.
I think **this makes a bit more sense on mobile** , where the swipe in from left is just implicit – see Slack app, etc.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [March 14, 2018, 5:48am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/8 "2018-03-14T05:48:43Z")
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.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 14, 2018, 6:41am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/9 "2018-03-14T06:41:12Z")
> [@codinghorror](#):
>
> 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)
[https://global.discourse-cdn.com/meta/original/3X/4/0/4001c71fa6297b33c5892eec8978d0e9e1453887.mp4](https://global.discourse-cdn.com/meta/original/3X/4/0/4001c71fa6297b33c5892eec8978d0e9e1453887.mp4)
### If on **medium screen:**
Panel covers content and is 450px wide
[https://global.discourse-cdn.com/meta/original/3X/c/d/cda7b8abd81c1c5d7cb899b1549c9313c28caafd.mp4](https://global.discourse-cdn.com/meta/original/3X/c/d/cda7b8abd81c1c5d7cb899b1549c9313c28caafd.mp4)
### 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
[https://global.discourse-cdn.com/meta/original/3X/a/f/af0525ad6718b0d1a0cca20f4c9587ade08926fd.mp4](https://global.discourse-cdn.com/meta/original/3X/a/f/af0525ad6718b0d1a0cca20f4c9587ade08926fd.mp4)
### On **extra large screens**
Where there’s just way too much space, the content is not pushed, the side panel just comes out:
[https://global.discourse-cdn.com/meta/original/3X/7/7/779188c624a5ddb53c5c37f29c44702e1092e961.mp4](https://global.discourse-cdn.com/meta/original/3X/7/7/779188c624a5ddb53c5c37f29c44702e1092e961.mp4)
---
### Author:  [@nothing](https://meta.discourse.org/u/nothing)
#### Post date: [April 29, 2018, 9:44am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/10 "2018-04-29T09:44:30Z")
we still can not do that, we are expecting: D
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [April 30, 2018, 2:35am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/11 "2018-04-30T02:35:52Z")
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.
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [April 30, 2018, 2:42am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/12 "2018-04-30T02:42:32Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 30, 2018, 5:08am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/13 "2018-04-30T05:08:23Z")
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.
---
### Author:  [@nothing](https://meta.discourse.org/u/nothing)
#### Post date: [April 30, 2018, 8:08am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/15 "2018-04-30T08:08:42Z")
It would be nice to get the top, new, and top components in the top menu and the hamburger menu in the left. For example reddit is new
---
### Author:  [@gingerman](https://meta.discourse.org/u/gingerman)
#### Post date: [May 12, 2018, 4:41pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/16 "2018-05-12T16:41:08Z")
@Johani great work..are you planning to create a theme for this or it will be part of the core ?
---
### Author:  [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [May 13, 2018, 12:19am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/17 "2018-05-13T00:19:49Z")
Very nice, would love to see this as a theme !!
---
### Author:  [@misaka4e21](https://meta.discourse.org/u/misaka4e21)
#### Post date: [May 22, 2018, 12:04am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/18 "2018-05-22T00:04:13Z")
## Updates
I created [another theme](https://github.com/misaka4e21/material-design-sidebar-theme/tree/generalization) based on [the customized one listed in the original post](https://github.com/hitorino/theme-md-toolbar-nav):
> **[GitHub - misaka4e21/material-design-sidebar-theme: Material Design Theme for...](https://github.com/misaka4e21/material-design-sidebar-theme/tree/generalization)**
>
> generalization
It is more generic, and supports i18n locales, but it still needs some cleaning and improvements though.
You might like to have a first look:
(The screenshot presents how it works with the official [Material Design Theme](https://github.com/discourse/material-design-stock-theme))
* * *
#### (Original post)
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](https://github.com/hitorino/theme-md-toolbar-nav) 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` 😰)
---
### Author:  [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [May 22, 2018, 3:49am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/19 "2018-05-22T03:49:36Z")
That looks nice! 👍
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 24, 2018, 6:30pm UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/21 "2018-05-24T18:30:46Z")
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](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696) 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?
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [May 25, 2018, 9:15am UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/22 "2018-05-25T09:15:30Z")
I have a long history of burying the lead and otherwise conflating multiple independent ideas in this topic 😅
Because this:
> [@awesomerobot](#):
>
> one thing I’m not convinced on is having the hamburger icon on the top left
Can by and large be kept completely separate from this:
> [@awesomerobot](#):
>
> 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?
There’s really 3 separate UX discussions to be had here:
1. 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](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789)
2. Is the hamburger menu due for a redesign? My personal opinion is a resounding **YES**.
3. _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.
[Next page](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287.md?page=2)