Sidebars have been on websites long before Google introduced its first iteration of Material Design back in 2014. Since then, a lot of things have changed, but the company's condensed version of the sidebar has stuck with many websites over the years, most prominently Google Photos. It has also found its way into many other Google web services, like Google Play Music, YouTube, Hangouts, and even Gmail. Now Google has finally added this condensed sidebar to its Material Design guidelines and gave it a proper name: navigation rail. The specification is still under development, and it might even come to Android apps using tablet layouts in the future.

Since we've already seen navigation rails across many Google websites, the underlying principles aren't novel: Much like bottom bars on small screens, rails are supposed to offer easy access to the most important top-level destinations of a (web) app. In Google Photo's case, these are in fact the same you can find in the corresponding Android app's bottom bar, the only addition being a shortcut to create and buy photo books. The same is true for YouTube, which includes an additional shortcut to your history on the website.

Here are examples of the navigation rail across some of Google's websites.

Google being Google, there are wide variations between navigation rails across its services, and the company doesn't adhere to its own best practices. That's understandable, though, since the guidelines are brand-new, but some issues do seem like broad oversights. The most glaring one can be found in Gmail, where navigation rail items are not accompanied by descriptions. That makes custom labels extremely hard to discern, especially when more than one share the same color.


The guideline states: "Caution. Ensure that icons are clear to users if labels are omitted." Yeah, about that...

The idea behind the navigation rails is well intended, though: They help create smooth transitions between mobile and desktop experiences. Android apps developed with Chrome OS in mind might heavily benefit from rails, as they'll be able to scale more easily across different window sizes. Google does a good job visualizing that idea:

You can already experience these three formats when you look at the YouTube website and app.

Many other Google services like Drive and Maps don't have navigation rails yet, but since the Drive and Maps apps both have bottom bars, I'd hope that we soon see the rails on their desktop interfaces, as well. Maybe the company even manages to unify the approach across its websites and apps once the new guideline is finalized.