# Full height, slide out hamburger menu
**URL:** https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789
**Category:** Feature
**Tags:** rfc, spec
**Created:** [6월 8, 2015, 10:06오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789 "2015-06-08T22:06:02Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [6월 8, 2015, 10:06오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/1 "2015-06-08T22:06:02Z")
Just capturing this as it is a target for Discourse 1.4.
Our hamburger menu should be a full-height, slide out from the right. Sort of how Google Inbox does it:
This _also_ implies search and notifications should maybe be full height slide outs, too – search is absolutely a right hand panel in Slack, for example – but let’s cross that bridge when we get there I guess?
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [6월 9, 2015, 9:32오전 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/5 "2015-06-09T09:32:23Z")
Is it also a goal to support touch gestures? So if I’m browsing a Discourse forum on a mobile device, I could simply drag the menu in by swiping from right (edge) to left.
Some example libraries:
- [http://hammerjs.github.io/](http://hammerjs.github.io/)
- [http://quojs.tapquo.com/](http://quojs.tapquo.com/)
- [GitHub - runspired/ember-mobiletouch: [DEPRECATED] see https://github.com/runspired/ember-gestures · GitHub](https://github.com/runspired/ember-mobiletouch) (Hammer-based)
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [6월 9, 2015, 9:45오전 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/6 "2015-06-09T09:45:55Z")
As long as it doesn’t trigger when you slide from the middle. Holy shit, Blogger is annoying with that…
---
### Author:  [@dbm](https://meta.discourse.org/u/dbm)
#### Post date: [6월 9, 2015, 11:34오전 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/7 "2015-06-09T11:34:36Z")
Love the idea, seems smoother 😃
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [6월 9, 2015, 8:23오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/8 "2015-06-09T20:23:16Z")
I might be getting WAY too far ahead of myself, but what are your thoughts on combining the avatar and notifications to clean it up a bit? Something like this perhaps?
---
### Author:  [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [6월 9, 2015, 8:58오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/9 "2015-06-09T20:58:31Z")
This is interesting - I’m a little concerned with the possible size of clickable / touchable elements or menu options… they should target being finger sized (48dp).
> **[Accessibility overview – Material Design 3](https://m3.material.io/foundations/overview/principles)**
>
> Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI.
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [6월 9, 2015, 9:03오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/10 "2015-06-09T21:03:58Z")
Good point. My example was simply for a desktop view. It would have to be cut down considerably for mobile, but I think that could easily be done by eliminating the number of entries/categories shown, etc…
---
### Author:  [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [6월 9, 2015, 9:05오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/11 "2015-06-09T21:05:12Z")
It’s not just mobile as more desktops and laptops are coming with dual inputs both touchpads, a mouse and touch screens.
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [6월 9, 2015, 9:09오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/12 "2015-06-09T21:09:10Z")
It’s also bad practice to hide content on varying screen sizes simply because it doesn’t fit, so I may have to put my foot in my mouth on that one…
> **[Responsive web design basics | Articles | web.dev](https://web.dev/articles/responsive-web-design-basics?hl=en)**
>
> Create sites that respond to the needs and capabilities of the device they're viewed on.
> ###Never completely hide content
> Be careful when choosing what content to hide or show depending on screen size. Don’t simply hide content just because you can’t fit it on screen. Screen size is not a definitive indication of what a user may want. For example, eliminating the pollen count from the weather forecast could be a serious issue for spring time allergy sufferers who need the information to determine if they can go outside or not.
Back to the drawing board…
---
### Author:  [@cipher1](https://meta.discourse.org/u/cipher1)
#### Post date: [6월 10, 2015, 2:38오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/13 "2015-06-10T14:38:28Z")
> [@rewphus](#):
>
> Back to the drawing board…
Maybe not. I think this idea could easily be enhanced by making each section (Messages, Notifications, Bookmarks) a collapsing/expanding node. Since bookmarks may be considered a little less important, perhaps that section should be collapsed by default. Add a scrollbar to the right and you may have a workable solution.
The only thing I can see throwing a wrench into the works with this idea is the addition of a Flags section for staff.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [6월 11, 2015, 8:24오전 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/14 "2015-06-11T08:24:28Z")
> [@rewphus](#):
>
> what are your thoughts on combining the avatar and notifications to clean it up a bit? Something like this perhaps?
I like this a whole hell of a lot the more I think about it. User menu is so lame with so few items:
- profile
- messages
- bookmarks
- prefs
- anon mode (if enabled..)
- log out
That could easily be combined. But why did you put user in the middle? Fitts law says it’ll be better on the edge, rightmost..
I really like the idea of **reducing the number of permanent, non-scrolling glyphs by one** , and the notification numbers being **right on your face** seems better to me (conceptually speaking).
What do you think @mcwumbly and @awesomerobot?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [6월 11, 2015, 8:29오전 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/15 "2015-06-11T08:29:09Z")
For mobile I really like this:
> **[Slideout.js - A touch slideout navigation menu for your mobile web apps.](https://slideout.js.org/)**
>
> Slideout.js is a touch slideout navigation menu for your mobile web apps.
Maybe something like this? need to think through the details.
---
### Author:  [@alefattorini](https://meta.discourse.org/u/alefattorini)
#### Post date: [6월 11, 2015, 8:47오전 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/16 "2015-06-11T08:47:10Z")
Woah, this is amazing, really clear and effective!
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [6월 11, 2015, 12:27오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/17 "2015-06-11T12:27:51Z")
> [@codinghorror](#):
>
> why did you put user in the middle?
I personally always expect to see a hamburger menu at the edge. Of course that’s because it usually is the only full slide out menu. It also is generally the place you go when you can’t find what you are looking for in the main navigation, so while it’s not supposed to function as a catch-all, it really is and that’s why logically I expect it either first or last. It’s essentially just a continuation of the nav bar.
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [6월 11, 2015, 12:38오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/18 "2015-06-11T12:38:03Z")
> [@codinghorror](#):
>
> But why did you put user in the middle? Fitts law says it’ll be better on the edge, rightmost..
Other than discourse, I’ve never seen a hamburger _not_ be on one edge or another, especially when it’s going to cause something to slide out from that edge… I think that’s why you see a number of apps end up putting the user avatar rightmost and the hamburger leftmost.
As for combining notifications and the user menu… I’m not sure. There aren’t a ton of items in the user menu right now, sure… but do I really want to see them underneath my notifications everytime I click to review where I’ve been liked or mentioned?
Many apps just have ‘Log out’ and ‘Preferences’ under the avatar.
I think combining them may be fighting against the grain.
---
### Author:  [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [6월 11, 2015, 12:46오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/19 "2015-06-11T12:46:10Z")
> [@codinghorror](#):
>
> I really like the idea of reducing the number of permanent, non-scrolling glyphs by one, and the notification numbers being right on your face seems better to me (conceptually speaking).
Is combining those two really practical?
How would the popup look like on desktop and mobile?
As a user I want a fast way to all my notifications. Just one click. No scrolling or mentally skipping a number of menu items that are irrelevant at that time. That’s how it works right now and it’s great.
If you find a way to make it even better, that’s fine with me. But don’t make it harder to get to my list of notifications just to remove one glyph.
BTW: Google, Facebook and whatnot all use separate icons for the user and notifications…
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [6월 11, 2015, 1:42오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/20 "2015-06-11T13:42:35Z")
That’s a fair point. My goal was to brainstorm ways to solve:
> [@codinghorror](#):
>
> This also implies search and notifications should maybe be full height slide outs, too
But i’m not really sure if those have to be full height slide outs. I’m not a big fan of having multiple slide outs, especially from the same side, so maybe it would be better just to keep it the way it is (Inbox still uses dropdowns for those features), except for the hamburger menu.
I still suggest moving the hamburger menu to the far right if it’s going to be the only slide out, even though it does go against standards of having the avatar in the top right corner.
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [6월 11, 2015, 2:22오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/21 "2015-06-11T14:22:48Z")
> [@mcwumbly](#):
>
> Other than discourse, I’ve never seen a hamburger not be on one edge or another, especially when it’s going to cause something to slide out from that edge… I think that’s why you see a number of apps end up putting the user avatar rightmost and the hamburger leftmost.
I’ll probably get beaten for this, but what if we actually _did_ have the hamburger menu on the left?
- It’d be closer to all the other “index” shortcuts, i.e. home-button, category-button and tag-button.
- It makes two menus immediately available via swipe.
- Left-to-right is hamburger
- Right-to-left is notifications or profile or both, depending on where we land on that.
And maybe on mobile, the hamburger menu could show the Topic title and category as well.
[quote=“mcwumbly, post:18, topic:29789”]
As for combining notifications and the user menu… I’m not sure. There aren’t a ton of items in the user menu right now, sure… but do I really want to see them underneath my notifications everytime I click to review where I’ve been liked or mentioned?
[/quote]With a clear separation as exemplified in @rewphus’ mockup, I don’t think visual noise would be a major factor.
On the other hand, one less icon for the brain to see, understand and memorise is a pretty big deal. Also the leftover space in the header means more room for experiments like a [sticky page counter](https://meta.discourse.org/t/custom-scrollbar-with-sticky-sidebar-necessitates-slight-ux-rethinkl/28635/3) or the addition of another icon for forums with (currently hypothetical) Chat enabled.
I’m all for it.
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [6월 11, 2015, 2:30오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/22 "2015-06-11T14:30:30Z")
> [@erlend\_sh](#):
>
> I’ll probably get beaten for this, but what if we actually did have the hamburger menu on the left?
Whew, I’m glad it was you that said it and not me. I also wanted to suggest this, but was afraid I wouldn’t have enough to back it up.
I also really like the idea of giving search more emphasis, particularly on desktop. Not sure if it would be needed as much on mobile if it meant picking that over the site name, but that is for another topic.
---
### Author:  [@OnceWas](https://meta.discourse.org/u/OnceWas)
#### Post date: [6월 11, 2015, 3:00오후 UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/23 "2015-06-11T15:00:22Z")
I _really_ like the combined notifications and avatar.
However, I don’t see all that much value in the hamburger. I have hidden it via CSS on a test site, and the only link in it that I miss is the one to admin.
[다음 페이지](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789.md?page=2)