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.
