Skip to main content


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.


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





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


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