Drawer

Organism

Side panel sliding in from the screen edge. Left / right placement with focus management and Escape close.

Right drawer

Preview

Notifications

  • New comment on your post

    2 min ago

  • Payment confirmed

    1 hour ago

  • Weekly report ready

    Yesterday

Code 



<%- include('modules/ui/Drawer', {
  id: 'notif-drawer',
  title: 'Notifications',
  side: 'right',
  children: '...'
}) %>

Left drawer

Preview

Navigation

Code 
<%- include('modules/ui/Drawer', {
  id: 'nav-drawer',
  title: 'Navigation',
  side: 'left',
  children: '...'
}) %>

With footer

Preview

Edit item

Code 
<%- include('modules/ui/Drawer', {
  id: 'edit-drawer',
  title: 'Edit item',
  children: '...',
  footer: '
...
'
}) %>
Source modules/ui/Drawer.ejs