Google released new and updated components for Material 3 Expressive, with several changes that impact what’s recommended for navigation in apps.
Bottom bars are officially referred to as ânavigation bars.â With Material 3, they all got taller and adopted pill-shaped indicators noting what tab youâre on.
The Expressive update reverses that trend of tall bottom bars. Officially, the âoriginal navigation barâ has been deprecated and replaced by the âflexible navigation barâ with a shorter height.
Old vs. new


It also âsupports horizontal navigation items in medium windowsâ where the tab label appears to the right of the icon on foldables and tablets.

The big change is how the ânavigation drawer is being deprecated in the Material 3 expressive update.â Instead, Google wants apps to use the updated navigation rail thatâs available in collapsed and expanded configurations. The main change is that the collapsed nav rail is wider than the original, and âcan easily transformâ into the expanded version that shows âsecondary destinations not visible when collapsed.âÂ
Officially, the navigation rail is for âmedium, expanded, large, or extra-large window sizes.â That translates to foldables, tablets, and even larger (desktop-esque) screens.
collapsed vs. expanded

Google wants apps that use navigation drawers to switch to the expanded navigation that âhas mostly the same functionality of the navigation drawer and adapts better across window size classes.â
Thatâs fine for large-screen devices but Google has essentially left out phones, with no navigation drawer replacement on smaller screens. Officially, navigation drawers in the Material 3 era were also just for larger screens, but even the documentation showed it on phones.
As always, these are guidelines and you can very much expect apps to keep using navigation drawers, but this is a strange oversight that might be addressed in the future. The other possibility is that apps, like Gmail and Keep, get redesigns that remove navigation drawers, but that would be huge undertakings.
FTC: We use income earning auto affiliate links. More.


Comments