Slideout

Definition

Like a modal window, a slide out panel is a child “window” which appears in front of the main content. They are an effective way to show and hide content that is only needed for short interactions.

Common Characteristics

All slide out panels appear on a 50% opacity black background by quickly sliding into view from the left or right side of the main window. Animation timing is preset to slide-in 250ms and slide out 200ms. They always have a heading, and a close function, plus additional content and controls. All slide out panels are the full height of the window, and width varies (see below).

While visible a slide out panel prevents the user from interacting with the main page. A user may close a slide out panel by clicking on the main window, or keyboard ESC, or “X”, or an action button.

Usage Guidelines

Slide out panels should be used for content that is only needed occasionally and should only be displayed at the user’s request. Use slide out panels instead of modal windows for complex interactions like long forms, or filters, or navigation menus.

Width

The width of a slide panel is not defined in order to allow designers to specify the width needed by the content in the design. It is recommended to specify the maximum width needed by number of columns or percent of screen, and the minimum width by pixels.

At the XS breakpoint, the slide out panel covers the full screen width.

Interaction

When a slide out panel is open, all functionality on the main window should be disabled including scrolling.

When the content of the slide out panel requires scrolling, any submit/cancel buttons should be locked to the bottom of the panel to remain visible.

Accessibility

Allow the user to dismiss a slide out panel using the keyboard's ESC key, or by clicking the main window, or by clicking close (“X”).