Sheet

When to use

Use sheets when expanding menu links or when opening a function that will be hidden and shown on the same page. So you can use it to show the topics, for the language switcher or for the search.

When not to use

Do not use sheets for other dropdowns than the ones in the menu.

Anatomy

The Sheet consists of:

(Interactive) states

The Sheet contains the states

Design properties

Typography

Colors

Structure

Best practices

Do's

The sheet uses the entire width of the screen. Place the sheet under the menu. The menu must always remain visible. Always offers a closing option of the sheet. This can be done with the cross or by clicking on everything outside the sheet. Avoid scrolling in a sheet. Make sure the information is concise and if the content is long, the height of the sheet should be increased. Horizontal scrolling in sheets is not possible. Sheets can display a wide variety of content and layouts, ranging from a list of actions to additional content in a table.

Don'ts

Tekst

Content guidelines

Accessibility

References

https://material.io/components/sheets-side#usage