I'm new to UX design. As a fun project, I'm designing a calendar web application while referring to Material Design. I can't seem to find anything about the top bar specs for web apps on the Material Design Website. What is the height of this top bar (for a 1440px screen)? Is it the same as top bar navigation on a mobile app? Looking at Google Photos seems to be around 88px...

Help would be much much appreciated.

  • For clarity, can you please take a screen shot to show us what top bar area you are referring to?
    – Izquierdo
    Sep 1, 2021 at 19:52
  • MUI is a project that implements Material Design. Could be handy.
    – Izhaki
    Sep 1, 2021 at 21:11

1 Answer 1


It doesn't matter.

First of all, remember Material is a set of suggested guidelines. You don't have to follow them to the A (although it's a good idea in some cases, especially if you need to slap something fast).

However, Material is quite flexible when it comes to desktop. You can see that in Material's site:

Dense Desktop Example


Prominent Dense Desktop Example

Prominent Dense

As you can see, height can vary and it's not set in stone. As long as it's reasonable and you keep padding and safe areas, you'll be fine

  • 1
    This was very helpful. Thank you! Sep 2, 2021 at 20:36

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.