Add Navigation Rail Sidenav Component

[JaxonWright]

Feature Description

This was just added to the official Material Design spec. Navigation rails provide ergonomic movement between primary destinations in apps. YouTube and Google Photos are a couple of examples that use this component.

Use Case

The rail is a side navigation component that displays three to seven app destinations and, optionally, a Floating Action Button. Each destination is represented by an icon and a text label.

The rail can function on its own at larger screen sizes, such as desktop and tablet. When users transition between screen sizes and devices, the rail can also complement other navigation components, such as bottom navigation.

Preview

[vthil3049]

Hi, are there plans to implement this feature soon? Its much awaited!

[the-ult]

This would be a really nice addition to the new MDC components.

It's a shame the specs do not have an option to place the text next to the icons instead of only underneath.

• Collapsed => only icons
• Expanded => icons with the text on the right side, like the navigation drawer

Does this automatically mean that 'extra' functionality will not be added to the Angular Navigation Rail?

[joshtune]

can't wait to see this come through

[tom-juntunen]

Has this been implemented? I am eagerly awaiting to use this new rail mode for minimizing my nav bar, but still allowing the user to go right to the nav item they want, saving a click.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[geoapis-ti]

Has this gone somewhere?