Skip to content

Components / Drawer

Drawer

A drawer is a component that allows for content to be hidden until triggered at which point the content will slide from either the left or right of the viewport and block all other page content, similar to a dialog.

Navigation
List item
List item
List item
List item
List item
List item

Structure

Elements

Backdrop

The backdrop should be created when a drawer is opened and destroyed when the drawer is closed.

Don't
Don't create multiple backdrops. They will stack and make the background much darker.

Drawer inner

The inner part of the drawer contains the information critical to the user.

Header

The header should give the user a sense of what the drawer content will contain.

It usually contains the following elements:

  • Title
  • Close button
  • Button or button group
Contextual header
 
Do
Ensure there is consistent spacing on the left and right of the drawer.

Content

The content area holds the main information for you drawer such as text, form fields, or a gallery. Your content should not contain any cards.

There is no default padding in the content area so that lists and other common UI components don’t need to be reset to display properly. The content area should also span as much of the visible area as possible, given the space occupied by the header and footer.

A drawer may contain an optional footer. It should be fixed to the bottom of the drawer so that it’s contents are always visible, even if the content area takes up a tremendous amount of space.

Variations

Position

A drawer can be docked either on the left or right side of the viewport.

Large, right navigation
Oh, would you look at that.
List item
List item
List item

Size

A drawer can be either small or large.

© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.