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.

Structure

Elements

  1. Container
  2. Header
  3. Content
  4. Footer (optional)
  5. Backdrop

Header

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

Content

The content area holds the main information for your 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.

Do
Ensure there is consistent spacing on the left and right of the drawer.

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.

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.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
menuBackgroundColor

Background fill for menu drawer

#FFFFFFFF
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.