Short description

A slide-out modal is a panel that slides in above the main view, leaving the underlying content partially visible. 

When and how to use it

Use a slide-out modal when the user needs additional content or related functionality, whilst not leaving the current view. This component is recommended for content such as advanced filtering, show item details (instead of expanding a row), simplified wizards (flows) and small functions.

The slide-out is beneficial to use when you want to reuse a mobile view in a desktop environment.

Behaviour

The component should slide into position in the viewport from the right, partially covering the main content for desktop.

For mobile, the slide-out modal can be presented in two ways. Either it slides up (read more below) in the viewport, or it covers the whole mobile viewport to make use of the available space.

Closing a modal

A modal can be closed in multiple ways depending on context.

• Clicking the close button in the upper right corner.
• Clicking outside the modal (possible to disable for critical flows)
• Clicking an explicit cancel or close button inside the content of the modal.
• Pressing ESC on the keyboard.

Sometimes you may want to stop involuntary closing of the modal. This is especially important if users have filled in information in a form and risks to loose data. A dialog may be triggered to confirm that the user did want to close and is aware of the consequences.

Sub-view navigation

The slide-out should not contain too much information. However, if you have information that could be considered secondary content (such as Terms & Conditions, help texts or related information):

1. Use a link that slides the secondary content in view from the right and pushes away the primary content.
2. Use a link back in the top of the new view, that slides the primary content back in the left direction.

Example of a sub view navigation

Width

General guideline

The width of the slide-out is based on the function/content that lives inside. Consider choosing a small version to make the transition to mobile views easier.

Specific for logged-in web

• Normal slide-out used in our shells have a fixed width in larger viewports (desktop and tablet): 512 px
• Large slide-out a wider version of the normal slide-out may be used in some cases (i.e. preview of pdf): 768 px
• X-Large slide out it the largest version available: 960px
• In mobile viewports the slide-outs become a full takeover or slide-up: 100% width

Slide-out responsive behaviour

A slide-out remains the set width as the browser window decreases (doesn't scale). When the modal can no longer fit in the viewport, it starts to shrink, but leaving a 32 px margin to still show the dark overlay and the underlaying page. 

In a mobile view the slide-out is always a full takeover leaving nothing of the page below visible.

Responsive behaviour

Header alternatives

Header alternatives

Placement

Modals on modals

When a slide-out triggers a dialogue, ensure that the dialogue is always centered on the screen. The overlay should cover everything behind the dialogue to create a clear separation between the foreground and the background.

Do this

Don't do this

-

Review

Result from the latest accessibility review of the component (All): 2024-07-26

• Contrast: ok
• Colour-blindness: ok
• Code + aria: ok
• Touch + keyboard: good
• Dark-mode: ok
• Focus: ok
• Reader: ok

• Details: Specification in Figma
• Instruction: How to access Figma