# 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:** [June 8, 2015, 10:06pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789 "2015-06-08T22:06:02Z")
**Posts on this page:** 15
**Page:** 2

<div class="post-metadata">

### Author: ![anon21958287](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@anon21958287](https://meta.discourse.org/u/anon21958287)
#### Post date: [June 11, 2015, 4:21pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/24 "2015-06-11T16:21:07Z")

</div>

> [@gerhard](#):
>
> 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.

Yes…notifications often take a few seconds to show themselves. Let’s not kill the other menus with that sort of response, too.

---

<div class="post-metadata">

### Author: ![loopback0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loopback0/32/37486_2.png) [@loopback0](https://meta.discourse.org/u/loopback0)
#### Post date: [June 11, 2015, 4:30pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/25 "2015-06-11T16:30:13Z")

</div>

How it is now is fine.

The notifications menu is its own distinct thing - it isn’t cluttered up with other menu options that I’ll have to look past and make sure I don’t accidentally click.  
Maybe the user menu is “lame” but it also keeps those options I use rarely out of the way of the options I use waaaaaaaaay more often.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 11, 2015, 4:50pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/26 "2015-06-11T16:50:39Z")

</div>

> [@loopback0](#):
>
> How it is now is fine.

I disagree that it is on mobile, I would way prefer

Swipe right to see notifications

Swipe left to see navigation

Also user drop down is weird

---

<div class="post-metadata">

### Author: ![anon21958287](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@anon21958287](https://meta.discourse.org/u/anon21958287)
#### Post date: [June 11, 2015, 6:08pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/27 "2015-06-11T18:08:20Z")

</div>

Oh mobile? Yeah, that’s different.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 11, 2015, 7:08pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/28 "2015-06-11T19:08:23Z")

</div>

> [@sam](#):
>
> Swipe right to see notifications
> 
> Swipe left to see navigation

That is a lot of hidden magic there. How does one teach the mobile users of such?

I’d much rather have one menu when you swipe left or right. It can contain the menu, profile, search, what-have-you. You simply click the section and it expands the menu for that action.

---

<div class="post-metadata">

### Author: ![loopback0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loopback0/32/37486_2.png) [@loopback0](https://meta.discourse.org/u/loopback0)
#### Post date: [June 12, 2015, 8:28am UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/29 "2015-06-12T08:28:45Z")

</div>

> [@sam](#):
>
> I disagree that it is on mobile

Yeah, but mobile is _generally_ not fine.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 12, 2015, 8:47am UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/30 "2015-06-12T08:47:46Z")

</div>

> [@cpradio](#):
>
> That is a lot of hidden magic there.

not really … click hamburger you see an effect showing its sliding stuff in from the right to the left, swipe left is just a discoverable shortcut, commonly used on slack, gmail and plenty of other mobile apps.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 12, 2015, 10:30am UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/31 "2015-06-12T10:30:46Z")

</div>

> [@sam](#):
>
> click hamburger you see an effect showing its sliding stuff in from the right to the left,

Not for me…

Android 5.0.1, latest version of Chrome

Plus slack doesn’t do what you say it does… (at least on Android). The swiping moves between tabs that are already visible. It isn’t bringing out a menu that didn’t have any prior existence previously. All of the swiping features in slack, have buttons that are visible and perform that action as well (from what I can tell). There isn’t any magic that you have to guess to find notifications (I was getting the suspicion that we’re removing the buttons in Discourse… is that not true).

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [June 12, 2015, 12:50pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/32 "2015-06-12T12:50:57Z")

</div>

It has always been my understanding that we’re merely talking about swipe-gestures as an _alternative_ to clicking a button that will be visible regardless.

Going back to the hamburger menu on the left: I don’t know about iOS, but on Android there’s definitely a trend of slide-in menus from the left, always discoverable via a visible hamburger bar.

And the menu tends to be a content-portal.

**Note:** These all had a visible hamburger icon in the top left corner before I clicked/swiped to reveal the menu.

 ![](https://global.discourse-cdn.com/meta/original/3X/b/c/bc8211be2102872f91c6323f792f1416205cf64b.png) ![](https://global.discourse-cdn.com/meta/original/3X/9/9/994643caa5e6bed59e8c3dcdd54df6f06e5b54a6.png) 

 ![](https://global.discourse-cdn.com/meta/original/3X/6/6/6603e1111cc6eeb133e6e5abb6df2bde9b18c204.png) ![](https://global.discourse-cdn.com/meta/original/3X/2/5/251efe164910469dcb32d068ce48bf4b73391d09.png) 

I think this convention makes a lot of sense for Discourse as well.

Interestingly, none of these has a slide-in, full height menu on the right.

---

<div class="post-metadata">

### Author: ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [June 12, 2015, 1:23pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/33 "2015-06-12T13:23:55Z")

</div>

The left-swipe navigation drawer on android is a well-established standard. Google has detailed design guidelines here:

[http://www.google.co.uk/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior](http://www.google.co.uk/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior)

However, they typically contain many far fewer items than Discourse’s hamburger menu. ie. \<10 so that no scrolling is required. Slack have just changed their interface, but the previous version had a nav drawer for channels, contacts and groups.

The current meta.discourse hamburger has 30 items, which is more than I have in my Slack nav drawer (~20). It’s an uncontrollable number of course, since people can run forums with 100 categories if they want. On my site, it’s only 14, but that’s without including sub-categories (which I’d like to see, as it happens).

+1 for consolidation of Notifications and avatar menu. It would be very clear if the hamburger on the left was for “places” and the avatar on the right was for “me” Again, this is how the previous version of the Slack app did things. (although they had no dedicated notifications area, just (1) next to channels/people who’d @mentioned you)

 ![](https://global.discourse-cdn.com/meta/original/3X/8/9/89470e1c1c99d5cb1e6c0648e3476a3be30254a6.png) ![](https://global.discourse-cdn.com/meta/original/3X/8/1/819bfd8f2bf9ef8979937470eb7044c0266740ee.jpg) 

I think @erlend_sh’s mockup gets it just right (although I’d keep search as a glyph rather than a text box, to conserve space on mobile)

---

<div class="post-metadata">

### Author: ![ky\_metro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ky_metro/32/42807_2.png) [@ky\_metro](https://meta.discourse.org/u/ky_metro)
#### Post date: [June 12, 2015, 6:26pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/34 "2015-06-12T18:26:46Z")

</div>

Another vote for left-hand slideout. It’s quickly becoming the standard, at least on mobile.

Maybe this is best for a separate discussion, but I’d also be in favor of removing/slimming down the number of categories listed. Maybe its just me, but I never find myself clicking them… there are other easier paths to find any given category. Instead, maybe combine all the useful “feature pages” and user menu items on the hamburger slideout, and make the user avatar handle notifications a la Rewphus.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 12, 2015, 6:33pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/35 "2015-06-12T18:33:21Z")

</div>

> [@erlend\_sh](#):
>
> It has always been my understanding that we’re merely talking about swipe-gestures as an alternative to clicking a button that will be visible regardless.

Okay, ignore me then 🙂 I mis-read something along the way. Sorry for the interruption.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [June 13, 2015, 2:42pm UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/36 "2015-06-13T14:42:29Z")

</div>

Edit: As per @codinghorror’s suggestion, I started a new thread to discuss this more radical change further.

> [@Proposing a left-aligned slide out hamburger menu](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287):
>
> 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 nee…

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 16, 2015, 6:19am UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/39 "2015-09-16T06:19:15Z")

</div>

We are done here for now, implemented… closing.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 16, 2015, 6:19am UTC](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789/40 "2015-09-16T06:19:27Z")

</div>



[Previous page](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789.md?page=1)
