Sliding Panes and Navigation Drawers

Created: Monday, 13 July 2015 Written by Gary Elsbernd Print Email

The menu itself is nothing new; sidebar menus with links to various parts of an app/site have been used since the early web (and probably elsewhere perhaps earlier still) to provide contextually relevant navigation. Also, buttons that toggle hidden content or optionally allow dragging to reveal content have also existed for much longer than touchscreen smartphones; the drawer in older versions of QuickTime Player and OS X’s color picker swatch drawer are good examples of this.

The patterns and terminology are getting muddied lately. After going through designer idea books, the iOS and Android guidelines, there is no consistency in behavior is lacking. I will attempt to describe each of the relevant patterns and proscribe their use.

Sliding Pane

A Sliding Pane starts “off screen”. When the user taps a navigation icon (often a “hamburger” button), the pane slides in, often from the right, OVER the current content and dims the main content. The menu is presented as “above” the current content, and therefore has prominence in the display. This menu is modal (the user cannot interact with the main content until the menu panel as been interacted with or dismissed). Tapping the dimmed content dismisses the menu. Drawer.js is one popular implementation of this pattern –

The pane content is meta content intended for temporary access (navigation buttons, chat contact list, etc.),

The activation button is always visible, and featured in the header immediately next to the side the drawer will appear on.

Navigation Drawer

A Navigation Drawer also starts “off screen”, but the drawer is part of the same page grid as the content. When the user taps the navigation icon or drags the screen, the drawer slides in, often from the right, pushing the main content to make room. This pane is non-modal (the user can interact with the main content or the menu panel) and on the same level as the main content. This can be implemented as a persistent object (stays onscreen until actively dismissed), or it can be dismissed when an option is chosen. This pattern is seen most often in apps and website focused on information consumption that use a left-to-right hierarchy. Snap.js is a terrific implementation of this pattern –

In either case, in a responsive website shown on a large screen (desktop or tablet), the menu may be shown persistently without the ability to dismiss.

These menus scrolls in the same way a view scrolls, independent of the main content.