Drawer / Sidebar

A vertical list of links within an application that slides out when button is pressed.

Custom component

The sidebar is a custom GEL component.

Default

Also known as a sidebar, the navigation drawer presents a vertical list of links within an application.

Open Left Drawer Open Right Drawer

Inverse

A variation of the Default drawer element, which replaces dark text against a light background with reversed text against a dark background.

Backdrop

The effect that produces the black background in the inverse variant drawer.

The dark modal backdrop is created by adding the following immediately after the .sidebar element:

<nav class="sidebar sidebar-left">
    ...
</nav>
<div class="sidebar-background"></div>

Overflow

When the navigation drawer's content extends the height of the drawer, a vertical scrollbar appears.

Collapsible Groups

To supplement overflow, when necessary, long lists of links can be grouped into categorized groups and collapsed. Users press toggle buttons to open and close the groups as dropdown menus.

Third-party Content Disclaimer