4

the guidelines for toolbar say:

Toolbars appear a step above the content they affect.

It also says that the toolbar can share seam with the content (unless scrolled), in the waterfall variant.

But i am not sure if this should be applicable to secondary toolbars as well. Like... the toolbar above a side menu. or a toolbar above side filters.

should they also have some elevation?

2 Answers 2

4

I don't think so, you can't apply elevation within the side menu(Model Side sheet). Depend on Google Materials guidelines as I'll show that below.

Another thing, Logically, you can't have more than one toolbar elevation in your mobile screen, it's a complicated case, you can have more than one below each other having the same degree of elevation.

Below I wanted to show some principles used by Google Materials in using elevations and what's the differences between using them inside the menu and other places:

1- Side menu and Side filters in Google materials, they deal with them as one elevation so anything within the side menu will look like a flat object, even it included a scroller.

enter image description here

2- In Google materials, who owns the top elevation is the Dialog/Picker, then it comes Nav Drawer, Model Side sheet, and Model Bottom sheet as shown below.

BUT It's important to know that: Even the side menu(Model Side sheet) and Nav drawer have the same elevation, you can't see them both, because the importance of the Nav drawer higher and it disables the side menu if it's activated.

enter image description here

2

A design example from the Inbox app from Google shows that they do not use elevation in the secondary menu navigation, even when content is scrolled in the side menu. However, the main app interface does indeed have the elevated shadow.

Please see the two images below for an illustrative example:

  1. Elevation included

Elevation

  1. Elevation not included in sidebar

No Elevation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.