Skip to main content

Drawers

Slide in menus. Drawers provide a special layout for cards.

Basic Drawer

To make the drawer appear and disappear toggle the .o-drawer--visible modifier.

Positions

.c-drawer--top , .c-drawer--right , .c-drawer--left and .c-drawer--bottom modifiers are all available.

.o-drawer--left

.o-drawer--bottom

.o-drawer--right

Attributes

Attribute Description
open (boolean) Initial open/close state of the draw
dismissible (boolean) Allow the drawer to be closed by clicking on the overlay
position="top|right|bottom|left" Set which border the drawer appears from

Methods

To access public methods on the element first select it using document.querySelector() .

Method Description
show() Opens the drawer
close() Hides the drawer
isOpen() Returns true or false