The sidebar is a graphical control element that displays various forms of information to the right or left side of an application windoworoperating system desktop. Examples of the sidebar can be seen in the Opera web browser, Apache web OpenOffice, LibreOffice, SoftMaker Presentations and File Explorer; in each case, the app exposes various functionalities via the sidebar.
Sidebars have originated in desktop apps, which are designed for rectangular screens with longer horizontal sides. Like toolbars and status bars, sidebars host both information and GUI widgets with which the user issues commands to the app. Unlike toolbars and status bars, sidebars have larger surface areas because of horizontally longer layout of desktop apps. Sidebars may use accordions to organize widgets and accommodate a larger layout than the visible surface area.
In a number of Widget engines, one is able to install applets which can reside on a sidebar. Notable examples include:
Early versions of Mac OS X's Aqua UI supported a sidebar concept called drawers, which pop outside the application window frame rather than expand from the inside like most application sidebars, are used. Despite criticism,[1] third-party applications like Transmit, OmniWeb, Shiira and BBEdit quickly adopted drawers. The standard email client, Mail, used drawers for listing mailboxes prior to 10.4 ("Tiger"), when they were replaced by a traditional sidebar. A number of other Apple-created applications and third-party applications have replaced drawers with a sidebar, or re-designed the interface to make a sidebar/drawer unnecessary. Apple's Human Interface Guidelines now recommend against their use.[2] Formerly drawer-heavy apps, like iCal and Adium, now contain no drawers at all, and instead display an optional sidebar within the main window.
The Android mobile operating system also uses the term "drawers" to refer to a type of sidebar menu widget, usually accessible by swiping from the left edge of the screen.[3]
Drawers are rarely used in modern Mac apps. As much as possible, redesign your UI to avoid using drawers; if you're creating a new app, avoid adding a drawer to the design.
|
| |
|---|---|
| Command input |
|
| Data input-output |
|
| Informational |
|
| Containers |
|
| Navigational |
|
| Special windows |
|
| Related concepts |
|
