Drawer

Drawers put additional content on a separate pane without changing the user's position in the UI. The drawer is placed on top of the existing page which is disabled until the drawer is closed.

Interactive Playground
Anatomy
Behavior
Specs
Keyboard Interactions

Interactive Playground

The Interactive Playground allows you to experiment with various chip styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div>
  <div
    data-focus-guard="true"
    tabindex="-1"
    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
  >
  </div>
  <div data-focus-lock-disabled="disabled">
    <div
      role="dialog"
      aria-modal="false"
      aria-labelledby=":R0:"
      class="neo-drawer"
    >
      <div class="neo-drawer__header">
        <div class="neo-drawer__header--left">
          <div id=":R0:">
            Title of Drawer
          </div>
        </div>
        <div class="neo-drawer__header--right">
          <button
            aria-label="Close drawer"
            class="neo-btn neo-icon-btn neo-btn-square neo-btn--default neo-btn-tertiary neo-btn-tertiary--default neo-btn-square-tertiary--default neo-drawer-icon-close"
            data-badge
          >
            <span class="neo-icon-close">
            </span>
          </button>
        </div>
      </div>
      <div class="neo-drawer__content">
        <div>
          <p>
            This Drawer should only have the x close button
          </p>
          <br>
          <p>
            Dismiss the Drawer by selecting the ‘Clear’ icon at the top right next to the title or by clicking anywhere on the background scrim.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    tabindex="-1"
    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
  >
  </div>
</div>

<Drawer
  title="Title of Drawer"
>
  <div>
    <p>
      This Drawer should only have the x close button
    </p>
    <br />
    <p>
      Dismiss the Drawer by selecting the ‘Clear’ icon at the top right next to the title or by clicking anywhere on the background scrim.
    </p>
  </div>
</Drawer>

Anatomy

The drawer component consists of different elements and action items. These appear on the right side of the main page in a fixed position. These can include buttons, back and close icons.

Actionable

The actionable drawer component features two always-visible buttons located at the bottom right. To dismiss the drawer, the user must select one of these actions.

Title:
A short description of the information displayed in the drawer. The title bar does not scroll with the content.
Content Placement:
Additional information, such as form fields or text, are placed here.
Secondary Button:
The secondary button provides an alternate action to the primary button.
Primary Button:
The primary button is the main action for the drawer. The button bar does not scroll with the content.

Informative

The informative drawer provides details pertinent to the current operation. It does not include any buttons, but may include text links. To dismiss the drawer, the user can either click the close icon at the top right corner or select the scrim.

Title:
A short description of the information displayed in the drawer. The title bar does not scroll with the content.
Content Placement:
Additional information, such as text, are placed here.
Close Icon:
Use this to close the drawer and return to the underlaying page.

Behavior

The drawer component provides users with actions and information related to the current page without interrupting the flow. The drawer is opened by another function, such as a filter, and presents additional, related content which helps users stay within their current process.

Interaction

The drawer component appears on the right side of the screen and slides in from the right when activated. The drawer slides out to the right when dismissed. This behavior is embedded into the code.

a drawer opening from the right side of the screen

Appearance

The drawer appears at the right side of the screen. A scrim covers the page behind the drawer preventing the user from making changes until the drawer is closed.

Drawer placed on the right side of the screen with scrim covering everything but the header

DO: Use the scrim component to tint the page without covering the navigation menu.

DON'T: Do not leave the drawer on top of the page without also placing a scrim behind it.

Buttons

The primary and secondary buttons for the drawer appear in the bottom right corner of the container. A close icon, located in the top right corner, is used to dismisses the drawer when there are no buttons.

DO: The main actions are always visible and positioned at the bottom part of the drawer.

DON'T: Do not hide the main actions so that the user is required to scroll down to them.

Placement

The drawer appears on the right side of the page unless superseded by the requirements of the language used.

Drawer placed on the right side of the screen

DO: Align the drawer to the right-hand side of the screen.

Drawer placed on the left side of the screen

DON'T: Do not align the drawer to the left unless designing for a right-to-left language (e.g. Hebrew, Arabic).

Scrolling

The top area of the drawer, containing the main title and close actions, remains fixed and always visible. The middle section, where content like form fields resides, is scrollable when it extends beyond the available space. The bottom section, housing the main action buttons, also remains fixed and always visible. While drawers can scroll, avoid making them excessively long if possible.

a drawer with a content section that has a native scroll bar on its content section and not its header or footer

Dismissal

Dismissal determines how the drawer is closed. Use the button to dismiss actionable drawers. The drawer component slides in from the right side of the screen when activated. The drawer slides out to the right when it is dismissed. This behavior is embedded into the code.

The informative drawer is dismissed by selecting the Close icon located on the top right corner of the drawer. An alternative option to dismiss this drawer is to click on the scrim.

Specs

Specs outline the size, style, spacing and padding properties of a component. The width of the drawer is adjustable and the height depends upon the browser size. The container is adjustable while maintaining the margins on all sides of the content.

Keyboard Interactions

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.

Keystrokes	Interaction
Tab	Moves to the next interactive element.
Shift + Tab	Moves to the previous interactive element.
Enter or Spacebar	Activates the selected interactive element on the drawer.
Esc	Closes the drawer. Same as a close button.