4

On the page https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior there are the following guidelines for drawer look&feel (here a snapshot with my comments/outlines):

enter image description here

I presume "the same elevation" requirement had a purpose not to overcrowd page with unneeded shadows which could look messy. But paradox, as I percept, occurs then. Introducing shadow (i.e. elevation) of drawer could resolve the issue though. What have I missed in my reasoning? Thanks.

Improve this question

2 Answers 2

Reset to default
4

The App bar has shadow as it is elevated and content passes below it. The Navigation drawer is at the same level as the content, but it doesn't scroll with it.

On one hand, there is no content that will pass below the Navigation drawer so there is no need to elevate it. On the other hand the Navigation drawer is fixed in the screen like the App bar. So possibly to solve these two states we have a combination of both: it doesn't throw shadow over the content but it doesn't receive it from the App bar (which could imply it might pass below it).

Possibilities:

The problem with the left image is that it looks like the content can pass below the Navigation drawer.

The problem with the right image is that it looks like the Navigation drawer can pass below the App bar, or that it will scroll with the content.

Actual solution:

Image source.

Improve this answer
5
  • So you think it's a kinda quirk for making it to look nicer? I thought we must follow rules strictly without exceptions even for occasional beautification (anyway it seems unlogical and unclear when trying to imagine 3d layering, it forces a brain to ignore missing shadow)
    – Mikhail Karakulov
    Mar 21, 2017 at 10:29
  • @MikhailKarakulov I included more context in the answer. My impression is that this is an exception, because the elevation used in the App bar transmits there is/could be content behind. About the 3d layering, I imagine it being at the same level as the App bar but with the Light a little bit to the right, so it has less shadow than the App bar.
    – Alvaro
    Mar 21, 2017 at 10:42
  • I've got your point. but still first (top left) version looks more natural alghough a bit heavy because of shadow.. btw content can pass under drawer, for example during horizonal scrolling, so reasoning with passing content is not convincing enough.. thanks for answering!
    – Mikhail Karakulov
    Mar 21, 2017 at 13:07
  • @MikhailKarakulov You are welcome, very interesting question :) Although the content could pass below, the shadow doesn't appear until there is content below. Basically the shadow is a hint that it is over something. Check the last image in this page.
    – Alvaro
    Mar 21, 2017 at 13:28
  • 1
    @MikhailKarakulov, Alvaro is correct, the shadow is a hint of possible affordances of the plane. Horizontal scrolling is possible just like you say, but not common. In this case, you can use a scrollbar to suggest affordance, then an elevation if user scrolls to show there's content under the side menu. Otherwise, you can simply scroll the whole thing, including menu. Keep in mind desktop rules aren't very clear in Material, they're more a WIP than a real reference
    – Devin
    Mar 21, 2017 at 16:45
0

The App bar is not considered as content or background.

If you look at the Elevation & shadows page you will see that the App bar has a elevation of 4 dp. So nothing is wrong, Google are not contradicting themselves. You just haven't understood correctly.

Improve this answer
1
  • I did not claim App bar is a background or content. I noted it has elevation. But not the content and the drawer. So App bar must drop shadow from its left edge but it does not (which looks like it has same elevation level as nav drawer). Here is the point I talk about. And also about the feeling that just elevating whole drawer at level of app bar may could solve that inconsistency (but for some reason it hadn't done this way)
    – Mikhail Karakulov
    Mar 21, 2017 at 10:23

Your Answer

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

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